我开始使用过渡来“现代化”网站的感觉。到目前为止,: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";
但过渡似乎并没有发生 - 它只是从一个州跳到另一个州。
我做错了什么?
答案 0 :(得分:45)
删除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
属性设置动画。
答案 1 :(得分:7)
您无法使用display
属性在州之间转换。
答案 2 :(得分:3)
@MarcoK提供的答案包括评论显示已经是正确的方向。设置display
属性会阻碍 transition
。
更好的实践是将未加前缀的(标准)版本放在浏览器供应商前缀的版本之后,以便面向未来。后者属性覆盖前者
其他改进:
-ms-transition
-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;
}
答案 3 :(得分:1)
可以在css中显示和隐藏元素,而不是:
display: none;
/* and */
display: block;
使用:
overflow: hidden;
max-height: 0;
/* and */
max-height: 9999999px;
由于您替换了此属性,因此您可以使用transition
为任何css值设置动画。