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事件。

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

1 个答案: