回调也适用于第一个 animationend 元素

Question

我想在第一个动画结束时做点什么 > 开始另一个动画 > 当第二个动画也开始播放时 > 提醒一些事情

但是在这里，第一个动画结束后还显示警报？为什么会这样？即使我说过要在 one animated

时显示警报

<div id="one">
  <div id="second">
    
  </div>
</div>

<button id="mybtn">
  Animate
</button>

@keyframes test {
      100% {
        
        height: 0px;
      }
}

#one {
  height: 100px;
  width: 100px;
  background: red;
  
}

#second {
  height: 70px;
  width: 70px;
  background: blue;
  
}

#mybtn {
  margin-top: 50px;
}

const overlay = document.getElementById('one');
const second = document.getElementById('second');
const mybtn = document.getElementById('mybtn');

mybtn.addEventListener('click', function(){
        second.style.animation = '4000ms ease forwards test';
     second.addEventListener("animationend", function() {
     
       one.style.animation = '4000ms ease forwards test';
       one.addEventListener("animationend", function() {
                 alert('hello');
            });
     });
});

这里是完整的 jsfiddle 代码：- https://jsfiddle.net/hjqxvy89/

Answer 1

显然父元素在它的子元素上也收到 animationend 事件，所以你有两个选择，要么检查 event.target:

const overlay = document.getElementById('overlay');
const second = document.getElementById('second');
const mybtn = document.getElementById('mybtn');

mybtn.addEventListener('click', function(){
        second.style.animation = '4000ms ease forwards test';
     second.addEventListener("animationend", function() {
     
       overlay.style.animation = '4000ms ease forwards test';
       overlay.addEventListener("animationend", function(e) {
              if (e.target === overlay)
                 alert('hello');
            });
     });
});

@keyframes test {
      100% {
        
        height: 0px;
      }
}

#overlay {
  height: 100px;
  width: 100px;
  background: red;
  
}

#second {
  height: 70px;
  width: 70px;
  background: blue;
  
}

#mybtn {
  margin-top: 50px;
}

<div id="overlay">
  <div id="second">
    
  </div>
</div>

<button id="mybtn">
  Animate
</button>

或者在父事件处理程序中简单地使用 event.preventPropagation()：

const overlay = document.getElementById('overlay');
const second = document.getElementById('second');
const mybtn = document.getElementById('mybtn');

mybtn.addEventListener('click', function(){
        second.style.animation = '4000ms ease forwards test';
     second.addEventListener("animationend", function(e) {
            e.stopPropagation();
     
       overlay.style.animation = '4000ms ease forwards test';
       overlay.addEventListener("animationend", function() {
                 alert('hello');
            });
     });
});

@keyframes test {
      100% {
        
        height: 0px;
      }
}

#overlay {
  height: 100px;
  width: 100px;
  background: red;
  
}

#second {
  height: 70px;
  width: 70px;
  background: blue;
  
}

#mybtn {
  margin-top: 50px;
}

<div id="overlay">
  <div id="second">
    
  </div>
</div>

<button id="mybtn">
  Animate
</button>

还有：

回调也适用于第一个 animationend 元素

callback also appliying to the first animationend element

html

javascript

css

animation