类更改时从“显示:无”的CSS过渡?

Posted

技术标签:

【中文标题】类更改时从“显示:无”的CSS过渡?【英文标题】:CSS transition from `display: none` on class change? 【发布时间】:2012-11-20 00:12:06 【问题描述】:

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

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

我做错了什么?

【问题讨论】:

注意transition 上的-ms- 前缀是不必要的; Internet Explorer 10 支持 transition 无前缀,而 Internet Explorer 9 不支持过渡。 感谢您的信息。我没有意识到 IE10 支持无前缀名称。 【参考方案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;
​

JSFiddle.

这样做的原因是只有带有数字的 CSS 属性才能被转换。你认为“50% 状态”应该在“display: none;”和“display: block;”之间是什么?由于无法计算,因此您无法为 display 属性设置动画。

【讨论】:

“数字”这个词相当含糊,使这个措辞看起来有点混乱。也就是说,一个可以转换但不使用数值的属性是visibility,尽管这当然不会产生动画效果。 我认为使用step-startstep-end 可以,因为没有中间值。那么公平。 一个不使用可以转换的数字的值是颜色和渐变值。对于颜色值,您可以使用单词等。 我不明白这背后的逻辑。我什至没有将display 定义为transition 属性的值。不过,它仅在我在 css 块中没有 display 属性时才有效。为什么? 您不需要在“show”类中应用过渡属性。 #myelem 不透明度:0;过渡:不透明度 0.4s 缓入; -ms-transition:不透明度 0.4s 缓入; -moz-transition:不透明度 0.4s 缓入; -webkit-transition:不透明度 0.4s 缓入; #myelem.show 不透明度:1; 【参考方案2】:

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

【讨论】:

【参考方案3】:

@MarcoK 提供的答案(包括 cmets)已经显示了正确的方向。设置display 属性阻碍 transition更好的做法 是将无前缀(标准)版本放在浏览器供应商前缀的版本之后,以便面向未来。后者的属性会覆盖前者。 其他改进:

正如@Charmander 指出的,-ms-transition 不受任何 Internet Explorer 支持 还有 Opera 的供应商前缀为 -o-transition 为 Op 10.5-12 & Op Mobile 10-12,目前可能只有不到 0.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】:

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

display: none;

/* and */

display: block;

使用:

overflow: hidden;
max-height: 0;

/* and */

max-height: 9999999px;

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

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

【讨论】:

以上是关于类更改时从“显示:无”的CSS过渡?的主要内容,如果未能解决你的问题,请参考以下文章

CSS:图像悬停过渡不适用于显示无/显示:块和图像交换

淡入淡出/ css 类过渡发生乱序

CSS3之过渡

AngularJS 和 CSS 过渡

react, css) 淡入淡出的过渡 css,当背景图像用 className 改变时

CSS:我可以为图像颜色更改悬停效果添加轻松过渡吗?