灏天阁

动画及过渡事件

· Yin灏

动画相关事件

在动画播放进程中，前后会发生动画开始animation start、动画结束 animation end 和动画迭代 animation iteration 的事件。

<div id="div01">Hello</div>

#div01 {
  font-size: 2em;
  animation: text_color 2s 3;
}

@keyframes text_color {
  from {
    color: Gold;
  }
  to {
    color: RoyalBlue;
  }
}

div01.addEventListener('animationstart', () => console.log('The animation is starting.'));
div01.addEventListener('animationend', () => console.log('The animation is over.'));
// 动画再次被 播放/迭代 的时候被触发
div01.addEventListener('animationiteration', () => console.log('The animation is iterated.'));

过渡结束事件

如果元素被设置了过渡效果，被播放到结束的时候，会发生过度事件。

<div id="div01">Hello</div>

#div01 {
  font-size: 2em;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: GoldenRod;
  transition: transform 2s;
  position: relative;
  left: 50px;
  top: 50px;
}

#div01:hover {
  transform: rotate(360deg)
}

div01.addEventListener('transitionend', () => console.log('The animation is starting.'));

- Book Lists -