类变化时从`display：none`的CSS转换？ [英] CSS transition from `display: none` on class change?

问题描述

我开始使用转换来现代化网站的感觉。到目前为止，：hover 转换工作的很好。

I've started using transitions to "modernise" the feel of a site. So far, :hover transitions are working great. Now I'm wondering if it's possible to trigger a transition based on other things, such as when a class changes.

以下是相关的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为：

The JavaScript to trigger the change is:

document.getElementById('myelem').className = "show";

但是转换似乎并没有发生 - 它只是从一个状态跳到另一个状态。

But the transition doesn't seem to be happening - it's just jumping from one state to the other.

我做错了什么？

推荐答案

您删除显示属性。

#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 。

JSFiddle.

这样做的原因是只有具有数字的CSS属性才能转换。你认为50％状态应该在 display：none; 和 display：block; ？由于无法计算，因此您不能为显示属性设置动画。

The reason for this is that only CSS properties with numbers can be transitioned. What do you think the "50% state" should be between "display: none;" and "display: block;"? Since that can't be calculated, you can't animate the display property.

这篇关于类变化时从`display：none`的CSS转换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！