类更改时从“display:none”的CSS转换？

我已经开始使用过渡来“现代化”网站的感觉。到目前为止，

：悬停

转换效果很好。现在我想知道是否有可能触发基于其他事情的转换，比如当类发生变化时

以下是相关的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";

但这种转变似乎没有发生——它只是从一个州跳到另一个州

---

我做错了什么？

您不能使用

显示

属性在状态之间转换。

当您删除

显示

属性时，它确实起作用

#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;
}​

---

原因是只有带有数字的CSS属性才能转换。您认为“50%状态”在“

display:none；

”和“

display:block；

”之间应该是什么？由于无法计算该值，因此无法设置

显示属性的动画。
由@marok提供的答案（包括注释）已经显示了正确的方向。设置
显示
属性会妨碍
转换


不过，更好的做法是将非固定（标准）版本放在浏览器供应商前缀的版本之后，以备将来使用。后一个属性覆盖前一个属性。

其他改进：


正如@Charmander指出的，
-ms transition
不受任何Internet Explorer的支持
还有Opera的供应商前缀为
-o-transition
，目前可能只有不到.1%的全球浏览器支持。我会把它放进去完成的

CSS:

可以在css中设置显示和隐藏元素的动画，而不是：

display: none;

/* and */

display: block;

使用：

由于替换了此属性，因此可以使用
transition
设置任何css值的动画

工作示例：
数字这个词很模糊，这让这个短语看起来有点混乱。也就是说，可以转换的一个不使用数值的属性是
可见性
，尽管这当然不会产生动画效果。我认为使用
步骤开始
和
步骤结束
可以，因为没有中间值。那就足够了。不使用可以转换的数字的值是颜色和渐变值。对于颜色值，你可以用词之类的。我不明白背后的逻辑。我甚至没有将
display
定义为
transition
属性的值。不过，它只在css块中没有
display
属性时才起作用。为什么？您不需要在类“show”中应用转换属性#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上的
-ms-
前缀是不必要的；Internet Explorer 10支持
transition
unfixed，而Internet Explorer 9不支持transitions。感谢您提供的信息。我不知道IE10支持这个不固定的名字。
display: none;

/* and */

display: block;

overflow: hidden;
max-height: 0;

/* and */

max-height: 9999999px;