页面上如何使用 给需要过渡的元素添加 v-slide-in 指令
<template>
<div class="continer">
<div v-slide-in class="item">1</div>
<div v-slide-in class="item">2</div>
<div v-slide-in class="item">3</div>
...
</div>
</template>
效果:当元素出现在试图后,会缓动到目标位置
指令代码:
const DISTANCE = 100;
const DURATION = 500;
const animationMap = new WeakMap()
const ob = new IntersectionObserver((entires) => {
for(const entry of entires){
if(entry.isIntersecting){
animationMap.get(entry.target).play()
ob.unobserve(entry.target)
}
}
})
function isBelowViewPort (el) {
const rect = el.getBoundingClientRect();
return rect.top > window.innerHeight;
}
export default {
mounted(el){
setTimeout(() => {
if(!isBelowViewPort(el)){ //只有当元素在视口top值下面的时候才会触发animate
return;
}
const animation = el.animate(
[
{
transform: `translateY(${DISTANCE}px)`,
opacity:0.5
},
{
transform: `translateY(0px)`,
opacity:1,
}
],
{
duration: DURATION,
easing: 'ease'
}
)
animation.pause()
animationMap.set(el, animation)
ob.observe(el)
},0)
},
unmounted(el){
ob.unobserve(el)
}
}
标签:el,const,ob,animationMap,指令,过渡,entry,animation,加载 From: https://www.cnblogs.com/xuhuang/p/17469776.html