0

我注意到新Firefox Quantum上的动画存在问题。

当您第一次加载带有一些动画元素的页面时display: none;，当脚本将其切换到您时，.display = "block";您将错过整个动画，或者如果它超过几秒钟，则在开始时会错过部分动画。

在下面的片段中查看它：

var anims = document.getElementsByClassName("anim"),
    time = document.getElementById("time"),
    interval = null;

function animate() {
  for (var i = 0; i < anims.length; i++)
    anims[i].style.display = "block";
}

function timer(sec) {
  time.textContent = sec--;
  interval = setInterval(function () {
    time.textContent = sec >= 0 ? sec-- : clearInterval(interval) || "";
  }, 1000);
}

// Directly after click
button0.addEventListener("click", animate);

// One seconds after click
button1.addEventListener("click", function () {
  timer(1);
  setTimeout(animate, 1000);
});

// Two seconds after click
button2.addEventListener("click", function () {
  timer(2);
  setTimeout(animate, 2000);
});

// Three seconds after click
button3.addEventListener("click", function () {
  timer(3);
  setTimeout(animate, 3000);
});

// Hide the divs
reset.addEventListener("click", function () {
  for (var i = 0; i < anims.length; i++)
    anims[i].style.display = "none";
});
body {
  font-family: arial;
}

body > div {
  margin-bottom: 10px;
}

#result {
  background-color: #e5f3ff;
  height: 120px;
  padding: 10px;
}

.anim {
  display: none;
  float: left;
  margin: 10px;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  animation: animate 1.5s;
}

#anim1 {
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  
  /* Only one iteration iteration (default) */
  /* This one will not be animated */
}

#anim2 {
  background-color: #fddb92;
  animation-iteration-count: 3; 
  
  /* Three iterations */
  /* Only one iteration will be seen */
}

#anim3 {
  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  animation-iteration-count: infinite; 
  
  /* Infinite */
  /* No visible problem */
}

@keyframes animate {
  50% {
    transform: translate(80%, 100%) rotate(-360deg);
  }
}
<div>
  <span><strong>Reload the snippet</strong>
  before clicking another button for viewing the issue
  <br/><strong>Or,</strong>
  <em>Reset</em> (display: "none") before clicking a button to view with no issue: </span>
</div>

<div>
  <button id="button0">On click</button>
  <button id="button1">1 sec timeout</button>
  <button id="button2">2 sec timeout</button>
  <button id="button3">3 sec timeout</button>
  <button id="reset">Reset</button>
  <span id="time"></span>
</div>

<div id="result">
  <div id="anim1" class="anim"></div>
  <div id="anim2" class="anim"></div>
  <div id="anim3" class="anim"></div>
</div>

您会注意到无限动画显然没有任何问题，但其他两个显然有。

那么解决方案是什么？

笔记：

  • 您必须使用Firefox Quantum才能查看此内容。
  • 我在Google Chrome上尝试了相同的代码段，一切正常。
4

1 回答 1

1

测试它，很确定它可以通过使用类解决所有浏览器。有更多的方法来处理它，但是将动画放在一个新的类中，只有在单击按钮后才会添加它。

在 CSS 中，我将动画属性移到了一个新类中，并且新类还添加了块样式。

.anim-start {
  display: block;
  animation: animate 1.5s;
}

在 JS 中，我只更改style.display='block'为 anims[i].classList.add('anim-start');

见： https ://jsfiddle.net/0mgqd2ko/1/

使用新类的这种方法使其更容易。例如，如果你想从不透明度 0 过渡到 1 怎么办？从显示无开始时很难做到这一点。如果您只想使用可见性以便元素仍然占用空间怎么办？

于 2017-12-10T15:19:38.843 回答