为什么animationend/webkitAnimationEnd事件在被调用之前有延迟？

Question

当我收听animationend时，它会在延迟后被触发。您可以看到动画已完成（div移动到正确的位置），但事件不会在另一个300-500毫秒内触发。

的jsfiddle：https://jsfiddle.net/9q0scpa0/4/

这是为什么？

HTML：

<div class="page" id="page1" onclick="restart()"> 
    Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/> 
    Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/> 
    Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/> 
    Page 1<br/><br/>Page 1<br/><br/>Page 1<br/><br/> 
</div> 
<div class="page" id="page2" onclick="restart()"> 
    Page 2 
</div> 

CSS：

* 
{ 
    margin: 0em; 
    padding: 0em; 
} 

html 
{ 
    height: 100%; 
    width: 100%; 
} 

body 
{ 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

.page 
{ 
    position: relative; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    background-color: red; 
} 

@keyframes moveNext 
{ 
    0% { 
    transform: translate(0em,100%); 
    -webkit-transform: translate(0em,0%); 
    -moz-transform: translate(0em,0%); 
    } 

    100% { 
    transform: translate(0em,-100%); 
    -webkit-transform: translate(0em,-100%); 
    -moz-transform: translate(0em,-100%); 
    } 
} 

@keyframes movePrevious 
{ 
    0% { 
    transform: translate(0em,-100%); 
    -webkit-transform: translate(0em,-100%); 
    -moz-transform: translate(0em,-100%); 
    display: block; 
    } 

    100% { 
    transform: translate(0em,0%); 
    -webkit-transform: translate(0em,0%); 
    -moz-transform: translate(0em,0%); 
    } 
} 

#page1.leave 
{ 
    z-index: 0; 
    animation-name: moveNext; 
    -webkit-animation-delay: 200ms; 
    animation-delay: 200ms; 
    animation-duration: 800ms; 
    animation-iteration-count: 1; 
    animation-timing-function: ease-in-out; 
    animation-fill-mode: forwards; 
} 

#page2.enter 
{ 
    background-color: blue; 
    z-index: 1; 
    animation-name: moveNext; 
    animation-duration: 750ms; 
    animation-iteration-count: 1; 
    animation-timing-function: ease-in-out; 
    animation-fill-mode: forwards; 
} 

#page1.enter 
{ 
    z-index: 0; 
    animation-name: movePrevious; 
    animation-duration: 800ms; 
    animation-iteration-count: 1; 
    animation-timing-function: ease-in-out; 
    animation-fill-mode: forwards; 
} 

#page2.leave 
{ 
    background-color: blue; 
    z-index: 1; 
    animation-name: movePrevious; 
    -webkit-animation-delay: 200ms; 
    animation-delay: 200ms; 
    animation-duration: 750ms; 
    animation-iteration-count: 1; 
    animation-timing-function: ease-in-out; 
    animation-fill-mode: forwards; 
} 

的JavaScript：

var isMoveNext = true; 
var page1 = document.getElementById("page1"); 
var page2 = document.getElementById("page2"); 

window.restart = function() 
{ 
    //Moving next 
    if (isMoveNext) 
    { 
    page1.className = "page leave"; 
    page2.className = "page enter"; 
    isMoveNext = false; 
    } 

    else 
    { 
    page1.className = "page enter"; 
    page2.className = "page leave"; 
    isMoveNext = true; 
    } 
} 

page1.addEventListener("animationend", function(event) { console.log("page 1"); }, false); 
page2.addEventListener("animationend", function(event) { console.log("page 2"); }, false); 
page1.addEventListener("webkitAnimationEnd", function(event) { console.log("page 1"); }, false); 
page2.addEventListener("webkitAnimationEnd", function(event) { console.log("page 2"); }, false); 
page1.addEventListener("MSAnimationEnd", function(event) { console.log("page 1"); }, false); 
page2.addEventListener("MSAnimationEnd", function(event) { console.log("page 2"); }, false); 

Answer 1

这是由于宽松。即使动画看起来接近完成，它仍然会移动非常小的数量，直到它达到某个阈值并将其捕捉到最终值。该阈值有意保持非常小，以防止在缓出时出现明显的折断。

如果将缓动切换为linear，那么animationend事件应该在动画视觉到达结束时立即触发。