Javascript 为什么animationend/webkitAnimationEnd事件在它之前有延迟'；这叫什么？

当我听

animationend

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

JSFiddle：

为什么会这样

HTML:

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 );

---

这是因为宽松。即使动画看起来接近完成，它仍然会移动非常小的量，直到达到某个阈值，该阈值将动画捕捉到结束值。有意将此阈值保持在非常小的范围内，以防止在释放时出现可见的捕捉

---

如果将播放切换到

linear

，

animationend

事件应在动画视觉结束时立即触发。

这是由于播放。即使动画看起来接近完成，它仍然会移动非常小的量，直到达到某个阈值，该阈值将动画捕捉到结束值。有意将此阈值保持在非常小的范围内，以防止在释放时出现可见的捕捉

---

如果将播放切换到

linear

，

animationend

事件应在动画视觉结束时立即触发。

谢谢，这就是原因！（我将在9分钟内标记答案）谢谢，这就是原因！（我将在9分钟内标记答案）

*
{
  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;
}

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 );