CSS从“显示:无”在类更改时过渡

Question

我已经开始使用过渡来"现代化"网站的感觉。到目前为止，: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";

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

我做错了什么？

Answer 1

当您删除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 属性。您认为"50%状态"应该在"display: none;"和"display: block;"之间是什么？由于无法计算，因此无法对 display 属性进行动画处理。

Answer 2

不能使用 display 属性在状态之间转换。

Answer 3

包括注释在内的@MarcoK提供的答案已经显示了正确的方向。设置display属性会阻碍transition。更好的做法是将无前缀（标准）版本放在浏览器供应商前缀版本之后，以便面向未来。后一个属性覆盖了前者.
其他改进：

• 正如@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;
}​    

Answer 4

可以在 css 中对显示和隐藏元素进行动画处理，只是代替：

display: none;
/* and */
display: block;

用：

overflow: hidden;
max-height: 0;
/* and */
max-height: 9999999px;

由于替换了此属性，因此可以使用 transition 对任何 css 值进行动画处理。

工作示例：https://jsfiddle.net/utyja8qx/