vue3 滚动条滑动到元素位置时，元素加载

水个文

效果

要实现的思路就是，使用IntersectionObserver 检测元素是否在视口中显示，然后在通过css来进行动画载入。

1.监控元素是否视口中显示

      const observer = new IntersectionObserver((entries) => {entries.forEach((entry) => {if (entry.isIntersecting) {acc.value = true}});});//监控元素observer.observe(slideInAnimation.value);

        其中 if里就是当元素显示在视口中要执行的逻辑 

        然后在调用，在里面要传入要监控元素的元素对象，这里要在onmounted里调用，注意异步

    onMounted(() => {//监控元素observer.observe(slideInAnimation.value);});

2.设置css

.box {overflow: hidden;height: 4000px;/* 为了演示效果，设置一个高度 */display: flex;justify-content: center;align-items: center;
}.slide-in-animation,
.onslide-in-animation {width: 400px;height: 200px;
}  //定义一个基础的数据，.slide-in-animation {  //这个是要载入时，将css替换即可background-color: #f00;position: relative;animation: slide-in 4s forwards; //持续时间
}@keyframes slide-in { //定义加载方式0% {visibility: hidden; //当百分0时元素不显示，从最右边加载，left: 100%;}100% { left: 0%;  //百分百时加载到最左边}
}

大概是这个个逻辑，然后通过三目运算来控制class的值

  <div class="box"><div :class="acc ? 'slide-in-animation' : 'onslide-in-animation'" ref="slideInAnimation"><img src="https://www.gm.com/assets/%E5%8D%81%E5%9B%9B%E6%9C%9F-CKW22HE9.png" alt=""style="width:400px;height:200px;"></div></div>

acc最开始是false，不显示，而当元素在视口里时，将slide-in-animation类名加入，执行动画，然后实现滑动到元素位置时元素滑动载入，这里我只是做了一个示例，通过  @keyframes 可以实现更复杂的效果

源码

<template><div class="box"><div :class="acc ? 'slide-in-animation' : 'onslide-in-animation'" ref="slideInAnimation"><img src="https://www.gm.com/assets/%E5%8D%81%E5%9B%9B%E6%9C%9F-CKW22HE9.png" alt=""style="width:400px;height:200px;"></div></div>
</template><script>
import { defineComponent, ref, onMounted } from 'vue';export default defineComponent({setup() {const slideInAnimation = ref(null);const observer = new IntersectionObserver((entries) => {entries.forEach((entry) => {if (entry.isIntersecting) {acc.value = true}});});onMounted(() => {//监控元素observer.observe(slideInAnimation.value);});const acc = ref(false)return {slideInAnimation, acc};}
});
</script><style scoped>
.box {overflow: hidden;height: 4000px;/* 为了演示效果，设置一个高度 */display: flex;justify-content: center;align-items: center;
}.slide-in-animation,
.onslide-in-animation {width: 400px;height: 200px;}.slide-in-animation {background-color: #f00;position: relative;animation: slide-in 4s forwards;
}@keyframes slide-in {0% {visibility: hidden;left: 100%;}100% {left: 0%;}
}
</style>