类更改时从“显示:无”的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-start
和step-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
。 更好的做法 是将无前缀(标准)版本放在浏览器供应商前缀的版本之后,以便面向未来。后者的属性会覆盖前者。
其他改进:
-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过渡?的主要内容,如果未能解决你的问题,请参考以下文章