公司做网站需要哪些,空间中国网站地址多少,中国建设门户网登录入口,完整网站源码asp水个文
效果 要实现的思路就是#xff0c;使用IntersectionObserver 检测元素是否在视口中显示#xff0c;然后在通过css来进行动画载入。
1.监控元素是否视口中显示 const observer new IntersectionObserver((entries) {entries.forEach((entry) {if (entry.i…水个文
效果 要实现的思路就是使用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 classboxdiv :classacc ? slide-in-animation : onslide-in-animation refslideInAnimationimg srchttps://www.gm.com/assets/%E5%8D%81%E5%9B%9B%E6%9C%9F-CKW22HE9.png altstylewidth:400px;height:200px;/div/div
acc最开始是false不显示而当元素在视口里时将slide-in-animation类名加入执行动画然后实现滑动到元素位置时元素滑动载入这里我只是做了一个示例通过 keyframes 可以实现更复杂的效果
源码
templatediv classboxdiv :classacc ? slide-in-animation : onslide-in-animation refslideInAnimationimg srchttps://www.gm.com/assets/%E5%8D%81%E5%9B%9B%E6%9C%9F-CKW22HE9.png altstylewidth:400px;height:200px;/div/div
/templatescript
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};}
});
/scriptstyle 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
