50

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

4 回答 4

48

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

JSF中。

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

于 2012-12-02T09:40:17.420 回答
7

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

于 2012-12-02T09:26:40.013 回答
3

@MarcoK 提供的答案（包括评论）已经表明了正确的方向。设置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;
}​
于 2014-07-25T11:20:06.640 回答
1

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

display: none;

/* and */

display: block;

利用：

overflow: hidden;
max-height: 0;

/* and */

max-height: 9999999px;

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

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

于 2015-11-18T12:00:27.690 回答