CSS从' display: none '过渡到类更改?

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.

我已经开始使用转换来“现代化”网站的感觉。到目前为止:悬停过渡效果很好。现在我想知道是否有可能基于其他事情触发一个转换，比如当一个类发生变化时。

Here's the relevant CSS:

这里有相关的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;
}

The JavaScript to trigger the change is:

触发更改的JavaScript为:

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

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

但这种转变似乎并没有发生——它只是从一种状态跳到另一种状态。

What am I doing wrong?

我做错了什么?

4 个解决方案

#1

It does work when you remove the display properties.

当您删除显示属性时，它确实可以工作。

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

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.

原因是只有带有数字的CSS属性才可以转换。您认为“显示:none”和“display: block”之间的“50%状态”应该是什么?因为无法计算，所以不能对显示属性进行动画。

#2

You cannot use the display property for transitioning between states.

不能使用display属性在状态之间进行转换。

#3

The answer provided by @MarcoK including the comments shows already the right direction. Setting display property hinders transition.
A better practice is though to put the unprefixed (standards) version after the browser-vendor prefixed ones, in order to be future-proof. The latter properties overwrite the former.
Other improvements:

@MarcoK提供的答案包括评论已经显示了正确的方向。设置显示属性会阻碍转换。一个更好的做法是，在浏览器供应商的前缀之后，将unprefixed(标准)版本添加到将来的版本中。后者属性覆盖前者。其他的改进:

As @Charmander pointed out, -ms-transition isn't supported by any Internet Explorer
正如@Charmander所指出的，任何Internet Explorer都不支持-ms-transition
There's also Opera's vendor prefixed -o-transition for Op 10.5-12 & Op Mobile 10-12, which currently is probably supported by less than .1% of global browser. I'll put it in for completion
Opera还为Op 10.5-12 & Op Mobile 10-12提供了前缀-o-transition，这款手机目前可能只有不到。1%的全球浏览器支持。我要把它填好

CSS:

#myelem {
    opacity: 0;
    -webkit-transition: opacity .4s ease-in;
       -moz-transition: opacity .4s ease-in;
         -o-transition: opacity .4s ease-in;
            transition: opacity .4s ease-in;
}
#myelem.show {
    opacity: 1;
    -webkit-transition: opacity .4s ease-out;
       -moz-transition: opacity .4s ease-out;
         -o-transition: opacity .4s ease-out;
            transition: opacity .4s ease-out;
}

#4

It is possible to animate show and hide elements in css, just instead of:

可以在css中动态显示和隐藏元素，而不是:

display: none;

/* and */

display: block;

use:

使用:

overflow: hidden;
max-height: 0;

/* and */

max-height: 9999999px;

Since you replace this properties, you are able to animate any css value with transition.

由于您替换了这些属性，所以您可以使用transition来激活任何css值。

working example: https://jsfiddle.net/utyja8qx/

工作示例:https://jsfiddle.net/utyja8qx/

#1