页面向下滚动时元素平滑上升

Question

vue 指令

VSlideIn.js

const DISTANCE = 150;
const map = new WeakMap();

const ob = new IntersectionObserver((entries) => {
    for (const entry of entries) {
        if (entry.isIntersecting) {
            // 元素与视口相交
            const animation = map.get(entry.target);
            if (animation) {
                animation.play();
                ob.unobserve(entry.target);
            }
        }
    }
})

/**
 * 判断元素是否在视口下方
 * @param el 
 * @returns {boolean}
 */
const isBelowViewPort = (el) => {
    return el.getBoundingClientRect().top - DISTANCE > window.innerHeight;
}

export default {
    mounted(el, binding) {
                // 在视口上方的元素不执行动画
        if (!isBelowViewPort(el)) {
            return;
        }
        const animation = el.animation([
            {
                transform: `translateY(${binding.value}px)`,
                opacity: 0.5
            },
            {
                transform: 'translateY(0)',
                opacity: 1
            }
        ], {
            duration: 500,
            easing: 'ease-in-out',
            fill: 'forwards'
        });
        animation.pause();
        ob.observe(el);
        map.set(el, animation);
    },
    unmounted(el) {
        ob.unobserve(el);
    }
}