当通过 jQuery 应用类时，CSS 转换过渡在 Firefox 中没有动画答案

【问题标题】：CSS transform transition not animating in Firefox when class is applied through jQuery当通过 jQuery 应用类时，CSS 转换过渡在 Firefox 中没有动画
【发布时间】：2014-07-11 03:52:34
【问题描述】：

我在搞乱 CSS3 动画，我似乎无法让这个在 Firefox 中运行。

动画将在悬停或类似的情况下触发，但我正在尝试通过 jQuery 在滚动时应用一个类，它没有触发动画，但它正在应用该类。这是情况的 Codepen，在 Chrome 但不是 FF 中工作。有什么想法吗？

http://codepen.io/anon/pen/uvkaq

编辑：所以，我发现如果我将这个类直接应用到我试图制作动画的 H1 上，那么它可以正常工作。因此，它似乎没有在应用了该类的元素的子元素上触发动画。除了：

a) 考虑到我希望两者都发生，向多个元素添加多个类 b) 使用关键帧动画 ?

可能重复：Changing parent element's positioning prevents child element CSS3 transition in Firefox

HTML：

<header>
  <h1>Hello world</h1>
</header>

CSS：

body {
  height: 2000px;
}

header {
  background-color: teal;
  width: 100%;
  height: 5em;
  overflow: hidden;
}

h1 {
  -webkit-transform: translateX(-160px);
     -moz-transform: translateX(-160px);
      -ms-transform: translateX(-160px);
       -o-transform: translateX(-160px);
          transform: translateX(-160px);
  -webkit-transition: -webkit-transform 1s;
     -moz-transition:    -moz-transform 1s;
      -ms-transition:     -ms-transform 1s;
       -o-transition:      -o-transform 1s;
          transition:         transform 1s;
}

.scrolled {
  position: fixed;
}

.scrolled h1 {
  -webkit-transform: translateX(0px);
     -moz-transform: translateX(0px);
      -ms-transform: translateX(0px);
       -o-transform: translateX(0px);
          transform: translateX(0px);
}

【问题讨论】：

标签： jquery html css css-animations

【解决方案1】：

DEMO（在 Firefox 和 Chrome 中测试）

我进行了以下更改：

CSS

header.scrolled {
    position: fixed;
}

h1.scrolled {
    -webkit-transform: translateX(0px);
       -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
         -o-transform: translateX(0px);
            transform: translateX(0px);
}

JavaScript

在$("header").addClass("scrolled");之后添加

setTimeout(function() {
    $("h1").addClass("scrolled");
},10);

【讨论】：