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

时间:2012-12-02 09:01:55

标签: css css-transitions

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

但过渡似乎并没有发生 - 它只是从一个州跳到另一个州。

我做错了什么?

4 个答案:

答案 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
更好的实践是将未加前缀的(标准)版本放在浏览器供应商前缀的版本之后,以便面向未来。后者属性覆盖前者 其他改进:

  • 正如@Charmander所指出的,任何Internet Explorer都不支持-ms-transition
  • 还有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;
}​    

答案 3 :(得分:1)

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

display: none;

/* and */

display: block;

使用:

overflow: hidden;
max-height: 0;

/* and */

max-height: 9999999px;

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

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