CSS从`display：none`过渡到类变化？

一尘不染

CSS从`display：none`过渡到类变化？

css

我已经开始使用过渡来“现代化”网站的感觉。到目前为止，: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";

但是过渡似乎并没有发生-它只是从一个州跳到另一个州。

我究竟做错了什么？

阅读 581

2020-05-16

共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;
}

原因是只能转换带有数字的CSS属性。您认为“ 50％状态”应介于“ display: none;”和“ display: block;”之间是什么？由于无法计算该值，因此无法为该display属性设置动画。

2020-05-16