水个文
效果
要实现的思路就是,使用IntersectionObserver
检测元素是否在视口中显示,然后在通过css来进行动画载入。
1.监控元素是否视口中显示
javascript
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
acc.value = true
}
});
});
//监控元素
observer.observe(slideInAnimation.value);
其中 if里就是当元素显示在视口中要执行的逻辑
然后在调用,在里面要传入要监控元素的元素对象,这里要在onmounted里调用,注意异步
javascript
onMounted(() => {
//监控元素
observer.observe(slideInAnimation.value);
});
2.设置css
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的值
html
<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 可以实现更复杂的效果
源码
html
<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>