CSS3 转换（挂钩到 JS 类更改）在 FF 中不起作用答案

【问题标题】：CSS3 transition (hooked onto JS class change) not working in FFCSS3 转换（挂钩到 JS 类更改）在 FF 中不起作用
【发布时间】：2012-04-27 17:30:42
【问题描述】：

每当某些 JavaScript 将包含元素的类名更改为包含“活动”时，我设置了一个 CSS3 转换以在 h1 元素上触发。为此，我有两个 CSS 声明：

#idname .classname h1 {
    opacity: 0;
    left: -1.25em;
    z-index: 3;
    position: relative;
}

接着是：

#idname .classname.active h1 {
    opacity: 1;
    left: 0; 
    -webkit-transition : all 4s ease;
    -moz-transition    : all 4s ease;
    -ms-transition     : all 4s ease;
    -o-transition      : all 4s ease;
    transition         : all 4s ease;
}

这在 webkit 浏览器中运行良好，但在 Firefox 中似乎失败了。我怀疑这与我如何根据类名更改触发有关，尽管我可能是错的。 Firefox 不允许您这样做吗？有没有人有一个好的解决方法？提前感谢您提供的任何帮助。

【问题讨论】：

我刚刚尝试了上述方法，它似乎在 Firefox 中运行良好。你能发布一个完整的测试用例来说明你的问题吗？

标签： firefox css transitions

【解决方案1】：

我的问题通过在向 DOM 添加内容和添加特定类名以触发动画之间添加一点延迟来解决。 20 毫秒足以让我在 Firefox 中运行它。

【讨论】：