animationstart 事件监听元素显示

446 阅读1分钟

我们经常要在一个元素显示在页面时进行事件处理,如:echarts 重新显示在页面时需要调用下resize 方法,但浏览器并没有对应的事件提供;

但我们知道一个元素设置动画属性即 css animation 属性,元素出现在页面时就会触发动画,即就触发animationstart、animationend 事件,

所以我们只要给元素加上简单的动画,然后监听animationstart 事件即相对于监听了显示在页面时的事件了

示例:

<div onanimationstart="onShow" class="box">
</div>
<style>
    .box{
        animation: toOpacity 0.1s;
    }
    @keyframes toOpacity {
      from {
        opacity: 0.98
      } to {
        opacity: 1
      }
    }
</style>
`