记录一个 列表上拉淡入动画

1.0

今天在看小米11官网介绍时，看到淡入的动画，觉得不错，于是来写写看
https://www.mi.com/mi11 官网地址

2.0简单分析

其实原理很简单，就是添加一个动画

.fade-in-bottom {
	animation: fade-in-bottom 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.1s both;
}

@keyframes fade-in-bottom {
    0% {
        transform: translate3d(0,30px,0);  // 3d能触发计算机 gpu渲染
        opacity: 0;
    }
    100% {
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

这是一个从底部淡入的动画，那我们只需要在适当的时候，添加这个动画类就可以了

3.0 js 实现

我们只需要让目标元素出现在屏幕视口中时，就添加这个类名就可以了

function addAnimation(element,pgHeight){
    let ele = element;
    let pageY = pgHeight;

    function eleSocrll(){
        let eleTop = ele.getBoundingClientRect().top;
        add()
        function add(){
        	//距离可自行根据实际调整
            if (eleTop < (pageY - 10)){
                ele.classList.add("fade-in-bottom");
                window.removeEventListener('scroll',eleSocrll,false);
            }
        }
    }
    window.addEventListener('scroll',eleSocrll,false)
}
window.addAnimation = addAnimation

4.0 效果