<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 18:11:35 浏览: 47
如果你想让动画一直重复播放而不是只播放一次,可以使用CSS的animation属性而不是添加类名来触发动画。例如:
```
.animate {
animation: fadeIn 1s infinite;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
```
这样,动画将无限重复播放,直到元素不再可见为止。
如果你想让动画只播放一次,并且在元素再次进入视野时重新播放,则需要将 `observer.unobserve(entry.target);` 语句移动到触发动画结束时的事件处理程序中。例如:
```
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);
// 触发动画结束时的事件处理程序
entry.target.addEventListener('animationend', () => {
observer.unobserve(entry.target);
entry.target.classList.remove(animateClass);
}, { once: true });
}
});
}, options);
const elements = document.querySelectorAll('.animate');
elements.forEach(element => {
observer.observe(element);
});
}
```
这样,每次元素进入视野时,动画将播放一次,并在动画结束时从元素中删除类名和停止观察元素,以便在下次元素进入视野时重新开始动画。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
用jquery实现表的顺时针旋转 虎虎生威 生龙活虎 如虎添翼 卧虎藏龙
首 页 新 闻 角 色 世 界 漫 画 社 区 let header_navitem = this.document.querySelector('.header_navitem') let header_Cloud = this.document.querySelector('.header_Cloud') let SuspendedStyle = header_navitem.querySelectorAll('a') let header__navbar = this.document.querySelector('.header__navbar') let current = 0 for (let i = 0; i< SuspendedStyle.length; i++){ SuspendedStyle[i].addEventListener('mouseenter',function(){ animate(header_Cloud,this.offsetLeft); }) header__navbar.addEventListener('mouseleave',function(){ animate(header_Cloud,269); }) } })
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
首 页 新 闻 角 色 世 界 漫 画 社 区 let header_navitem = this.document.querySelector('.header_navitem') let header_Cloud = this.document.querySelector('.header_Cloud') let SuspendedStyle = header_navitem.querySelectorAll('a') let header__navbar = this.document.querySelector('.header__navbar') let current = 0 for (let i = 0; i< SuspendedStyle.length; i++){ SuspendedStyle[i].addEventListener('mouseenter',function(){ animate(header_Cloud,this.offsetLeft); }) header__navbar.addEventListener('mouseleave',function(){ animate(header_Cloud,269); }) } })
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)