Firefox Quantum的动画问题(Animation issue on Firefox Quantum)

Firefox Quantum的动画问题(Animation issue on Firefox Quantum)

我注意到新的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才能查看此内容。  
  我在谷歌浏览器上尝试了相同的代码片段，并且一切正常。  
I noticed an issue with animations on the new Firefox Quantum.
 
When you first load a page with some animated elements display: none;, when a script switches it to .display = "block"; you will miss the entire animation, or some parts of it at the beginning if it is longer than a few seconds.
 
View it in the snippet below:
 
 
 
  
  
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> 
  
 
 
You will notice that the infinite animation doesn't apparently have any problem, but the two others do obviously have.
 
What is the solution then?
 
Note: 
 
 
 You have to use Firefox Quantum in order to view this. 
 I have tried the same snippet on Google Chrome and everything is working good. 

                
最满意答案
                
                    
                        
 测试它，非常确定它通过使用类来解决所有浏览器。 有更多的方法来处理它，但把动画放在一个新的类中，只有在点击按钮后才会添加。 
 
 在CSS中，我将动画属性移动到一个新类中，新类也添加了块样式。 
 
.anim-start {
  display: block;
  animation: animate 1.5s;
}
 
 在JS中，我只将style.display='block'改为style.display='block' anims[i].classList.add('anim-start'); 
 
 请参阅： https ： //jsfiddle.net/0mgqd2ko/1/ 
 
 使用这种新类的方法可以更容易。 例如，如果您想从不透明度0转换到1，该怎么办？ 从显示开始时很难做到这一点。 而如果你只是想使用可见性，那么元素仍然占用空间呢？ 
Tested it, pretty sure it is solved for all browsers by using classes. There are more ways to handle it but putting the animation inside a new class that only gets added after the button click does the trick.
 
In the CSS I've moved the animation property to a new class, and the new class also add the block style.
 
.anim-start {
  display: block;
  animation: animate 1.5s;
}
 
In the JS I only changed style.display='block' to anims[i].classList.add('anim-start');
 
See: https://jsfiddle.net/0mgqd2ko/1/
 
Using this method of a new class makes it easier. For example, what if you want to transition from opacity 0 to 1? It's hard to do that when starting from display none. And what if you just want to use visibility so the elements still take space?