类更改时从`display: none` 的 CSS 转换？

CSS transition from `display: none` on class change?

提问by Niet the Dark Absol

I've started using transitions to "modernise" the feel of a site. So far, :hovertransitions 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.

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

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?

我究竟做错了什么？

采纳答案by MarcoK

It does work when you remove the displayproperties.

当您删除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;
}?

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 displayproperty.

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

回答by Henrik

You cannot use the displayproperty for transitioning between states.

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

回答by Volker E.

The answer provided by @MarcoK including the comments shows already the right direction. Setting displayproperty hinderstransition.
A better practiceis 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 提供的答案（包括评论）已经表明了正确的方向。设置display属性会阻碍transition.
一个更好的做法是，虽然把前缀的（标准）版本的浏览器供应商前缀的人后，为了要面向未来。后者的属性会覆盖前者。
其他改进：

• As @Charmander pointed out, -ms-transitionisn't supported by any Internet Explorer
• There's also Opera's vendor prefixed -o-transitionfor 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

• 正如@Charmander 指出的那样，-ms-transition任何 Internet Explorer 都不支持
• 还有 Opera 的供应商前缀-o-transition为Op 10.5-12 和 Op Mobile 10-12，目前可能只有不到 0.1% 的全球浏览器支持它。我会把它放进去完成

CSS:

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

回答by Dariusz Sikorski

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.

由于您替换了此属性，因此您可以使用 .css 为任何 css 值设置动画transition。

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

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