我已经开始使用转换来“现代化”网站的感觉。到目前为止，：悬停转换工作伟大。现在我想知道是否可能触发基于其他事情的转换，例如当一个类发生变化时。
这里是相关的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：block;”？由于无法计算，因此您不能为显示属性设置动画。
