<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:25 浏览: 42
你可以使用setInterval函数让它重复触发,代码如下:
```
<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);
});
setInterval(() => {
elements.forEach(element => {
observer.observe(element);
});
}, 1000); // 1秒钟触发一次
}
};
</script>
```
这样就可以每隔一段时间重复触发了。注意,setInterval函数的第二个参数是时间间隔,单位是毫秒。你可以根据需要自行调整。