<template> <div> <div class="animate" data-animate="fadeIn">Hello World</div> </div> </template> <script> export default { mounted() { const options = { rootMargin: '0px', threshold: 0.2 }; const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { const animateClass = entry.target.getAttribute('data-animate'); entry.target.classList.add(animateClass); observer.unobserve(entry.target); } }); }, options); const elements = document.querySelectorAll('.animate'); elements.forEach(element => { observer.observe(element); }); } }; </script>如何触发多次动画
时间: 2023-07-16 13:11:41 浏览: 48
要触发多次动画,你可以在观察者回调函数中添加逻辑,使得每次交叉时都将动画类移除并再次添加。
以下是修改后的代码示例:
```
<template>
<div>
<div class="animate" data-animate="fadeIn">Hello World</div>
</div>
</template>
<script>
export default {
mounted() {
const options = {
rootMargin: '0px',
threshold: 0.2
};
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const animateClass = entry.target.getAttribute('data-animate');
entry.target.classList.add(animateClass);
// 移除动画类并再次添加以触发多次动画
setTimeout(() => {
entry.target.classList.remove(animateClass);
}, 1000);
}
});
}, options);
const elements = document.querySelectorAll('.animate');
elements.forEach(element => {
observer.observe(element);
});
}
};
</script>
```
在这个示例中,我将移除动画类的操作放在了一个 setTimeout 函数中,并设置了 1 秒的延迟,以便给动画运行足够的时间。你可以根据具体情况来调整这个值。