Question

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

动画将在悬停或类似的东西上触发，但我尝试在滚动浏览jQuery时应用类，并且它不会触发动画，但它正在应用该类。这是一个Codepen的情况，在Chrome中工作但不是FF。有什么想法吗？

编辑：所以，我发现如果我将该课程直接应用于我试图制作动画的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);
}

Answer 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);

当通过jQuery应用类时，CSS转换过渡不会在Firefox中动画化

1 个答案: