CSS从`display:none`过渡到类变化?
我已经开始使用过渡来“现代化”网站的感觉。到目前为止,: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";
但是过渡似乎并没有发生-它只是从一个州跳到另一个州。
我究竟做错了什么?
回答:
当您删除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;
}
原因是只能转换带有数字的CSS属性。您认为“ 50%状态”应介于“ display: none;
”和“ display:
block;”之间是什么?由于无法计算该值,因此无法为该display
属性设置动画。
以上是 CSS从`display:none`过渡到类变化? 的全部内容, 来源链接: utcz.com/qa/419357.html