直接上代码:
const DISTANCE = 80;
const DURATION = 500;//动画时间
const map = new WeakMap()
const observer = new IntersectionObserver((entries)=>{
for(const entery of entries){
if(entery['isIntersecting']){
/**
* 该元素和视口处于相交位置
* 可播放该元素动画
**/
const anmiation = map.get(entery.target);
if(anmiation){
anmiation.play()
ob.unobserver(entery.target)
}
}
}
})
function isBelowViewport(el){
const rect = el.getBoundingClientRect()
retrun rect.top - DISTANCE > window.innerHeight
}
export default {
mounted(el){
if(!isBelowViewport(el)){
//视口之上的不处理动画
return ;
}
const anmiation = el.anmiation([
{transform:`translateY(${DURATION})px`,opacity:0.5,},
{transform:`translateY(0)`,opacity:1,},
],{
duration:DURATION,
easing:'ease-in-out',
fill:"forwards",
});
anmiation.pause()
ob.observer(el)
map.set(el,anmiation)
},
onUmounted(el){
ob.unobserver(el)
}
}