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

回到顶部