我们经常要在一个元素显示在页面时进行事件处理,如: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>
`