如何做元素显示在页面中和消失时才有动画
时间: 2024-04-10 20:32:39 浏览: 11
要实现元素在页面中显示或消失时才触发动画效果,可以使用Intersection Observer API。这个API提供了一种监测元素与浏览器视口交叉的方法,从而可以在元素进入或离开视口时触发相应的动画。
以下是一个使用Intersection Observer API的示例:
```html
<div class="my-element">内容</div>
```
```css
.my-element {
opacity: 0;
transition: opacity 0.5s;
}
.my-element.show {
opacity: 1;
}
```
```javascript
const elements = document.querySelectorAll('.my-element');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('show');
} else {
entry.target.classList.remove('show');
}
});
});
elements.forEach((element) => {
observer.observe(element);
});
```
上述代码中,首先定义了一个CSS样式`.my-element`,初始时opacity设置为0,并且定义了过渡效果。然后,在JavaScript代码中,首先获取所有具有`.my-element`类的元素,并创建一个Intersection Observer实例。通过调用`observe()`方法,将要观察的元素传递给Intersection Observer。在回调函数中,判断元素是否与视口交叉,并根据判断结果添加或移除`.show`类,从而控制元素的显示和消失。
这样,当元素进入视口时,会带有`.show`类,从而触发CSS过渡效果,实现动画效果。当元素离开视口时,`.show`类将被移除,元素会再次消失。
希望以上信息对您有所帮助!