在class级变更时从“display：none”过渡到CSS？
我已经开始使用转换来“现代化”网站的感觉。 到目前为止， :hover转换工作很好。 现在我想知道是否有可能触发基于其他事情的转换，例如类更改时。
这里是相关的CSS：
#myelem { opacity: 0; display: none; transition: opacity 0.4s ease-in, display 0.4s step-end; -ms-transition: opacity 0.4s ease-in, display 0.4s step-end; -moz-transition: opacity 0.4s ease-in, display 0.4s step-end; -webkit-transition: opacity 0.4s ease-in, display 0.4s step-end; } #myelem.show { display: block; opacity: 1; transition: opacity 0.4s ease-out, display 0.4s step-start; -ms-transition: opacity 0.4s ease-out, display 0.4s step-start; -moz-transition: opacity 0.4s ease-out, display 0.4s step-start; -webkit-transition: opacity 0.4s ease-out, display 0.4s step-start; }
引发更改的JavaScript是：
document.getElementById('myelem').className = "show";
但过渡似乎并没有发生 – 只是从一个州跳到另一个州。
我究竟做错了什么？
它在你删除display属性时工作。
#myelem { opacity: 0; transition: opacity 0.4s ease-in; -ms-transition: opacity 0.4s ease-in; -moz-transition: opacity 0.4s ease-in; -webkit-transition: opacity 0.4s ease-in; } #myelem.show { opacity: 1; transition: opacity 0.4s ease-out; -ms-transition: opacity 0.4s ease-out; -moz-transition: opacity 0.4s ease-out; -webkit-transition: opacity 0.4s ease-out; }
JSFiddle 。
这是因为只有具有数字的CSS属性才能被转换。 你认为“ display: none; ”和“ display: block; ”之间的“50％状态”应该是什么？ 由于无法计算，因此无法为display属性设置animation。
您不能使用display属性在状态之间转换。
@MarcoK提供的答案，包括评论显示已经是正确的方向。 设置display属性会阻碍 transition 。
尽pipe如此， 更好的做法是在浏览器供应商的前缀之后加上前缀（标准）版本，以保证未来的发展。 后者的属性覆盖前者。
其他改进：
- 正如@Charmander所指出的，任何Internet Explorer都不支持
-ms-transition - 还有Opera的供应商在Op 10.5-12和Op Mobile 10-12上加上了前缀
-o-transition，目前全球浏览器的支持率可能不足0.1％。 我会把它完成
CSS：
#myelem { opacity: 0; -webkit-transition: opacity .4s ease-in; -moz-transition: opacity .4s ease-in; -o-transition: opacity .4s ease-in; transition: opacity .4s ease-in; } #myelem.show { opacity: 1; -webkit-transition: opacity .4s ease-out; -moz-transition: opacity .4s ease-out; -o-transition: opacity .4s ease-out; transition: opacity .4s ease-out; }
这是可能的animation显示和隐藏元素在CSS中，而不是：
display: none; /* and */ display: block;
使用：
overflow: hidden; max-height: 0; /* and */ max-height: 9999999px;
由于你replace了这个属性，你可以通过transition为任何css值设置animation。
工作示例： https ： //jsfiddle.net/utyja8qx/
