Firefox의 애니메이션 문제 퀀텀

Question

Firefox 퀀텀에 애니메이션 문제가 있습니다.

애니메이션 요소가 display: none; 인 페이지를 처음로드 할 때 스크립트에서 .display = "block";으로 전환하면 전체 애니메이션 또는 몇 초가 걸리는 경우 시작 부분을 놓칠 수 있습니다. 아래의 코드 조각에서

보기를 :

var anims = document.getElementsByClassName("anim"), 
 
    button$ = document.getElementById("button$"), 
 
    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>

당신은 무한한 애니메이션은 분명히 문제가없는 것을 알 수 있지만, 다른 두가 분명하지.

그런 다음 해결책은 무엇입니까?

참고 : 당신은이를보기 위해 파이어 폭스 양자를 사용할 필요가

• .
• Google 크롬에서 동일한 스 니펫을 시도했으며 모든 것이 잘 작동합니다.

Answer 1

테스트를 통해 클래스를 사용하여 모든 브라우저에서 해결되는지 확실히 테스트했습니다. 이를 처리 할 수있는 더 많은 방법이 있지만 버튼 클릭 후 추가되는 새로운 클래스 안에 애니메이션을 넣는 것이 트릭입니다.

CSS에서 애니메이션 속성을 새 클래스로 이동했으며 새 클래스도 블록 스타일을 추가합니다. 새로운 클래스의이 방법이 더 쉽게 사용 https://jsfiddle.net/0mgqd2ko/1/

:

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

은 JS에서 나는 단지 anims[i].classList.add('anim-start');

볼 style.display='block'을 변경했습니다. 예를 들어 불투명도 0에서 1로 전환하려면 어떻게해야합니까? 디스플레이가없는 상태에서 시작할 때 그렇게하기가 어렵습니다. 요소가 여전히 공간을 차지할 수 있도록 가시성을 사용하려면 어떻게해야할까요?