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 才能查看此内容。
- 我在 Google Chrome 上尝试了相同的片段,一切正常。
测试了它,很确定它可以通过使用 classes 解决所有浏览器。有更多的方法来处理它,但是将动画放在一个新的 class 中,只有在单击按钮后才添加它。
在CSS中我把动画属性移到了新的class,新的class还添加了块样式。
.anim-start {
display: block;
animation: animate 1.5s;
}
在 JS 中,我只将 style.display='block'
更改为
anims[i].classList.add('anim-start');
见:
https://jsfiddle.net/0mgqd2ko/1/
使用这种新方法 class 更容易。例如,如果你想从不透明度 0 过渡到 1 怎么办?从显示 none 开始时很难做到这一点。如果您只想使用可见性,那么元素仍然需要 space 怎么办?
我注意到新 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 上尝试了相同的片段,一切正常。
测试了它,很确定它可以通过使用 classes 解决所有浏览器。有更多的方法来处理它,但是将动画放在一个新的 class 中,只有在单击按钮后才添加它。
在CSS中我把动画属性移到了新的class,新的class还添加了块样式。
.anim-start {
display: block;
animation: animate 1.5s;
}
在 JS 中,我只将 style.display='block'
更改为
anims[i].classList.add('anim-start');
见: https://jsfiddle.net/0mgqd2ko/1/
使用这种新方法 class 更容易。例如,如果你想从不透明度 0 过渡到 1 怎么办?从显示 none 开始时很难做到这一点。如果您只想使用可见性,那么元素仍然需要 space 怎么办?