类更改时从 `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 属性可以被转换。您认为“display: none;”和“display: block;”之间的“50% state”应该是什么？由于无法计算，您无法为 display 属性设置动画。