类更改时``display:none`的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属性在状态之间转换.