前端 - 请教一个关于gasp动画的问题？

Question

假设我现在有5屏的页面，当我鼠标滚动的时候加载上一页下一页，当页面出现的时候，有进场动画和离场动画。我现在写的是监听鼠标wheel事件，判断滚动方向，然后去找对应的元素一个一个添加动画，进场动画是从底部到中间，离场动画是从顶部到中间。然后我感觉写的好麻烦啊、请问有类似的demo或者文档可以参考的吗？

Answer 1

我个人推荐 aos.js ，配置简单实现方便

cnd 引入 或者 npm 下载都行

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"/><script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

npm install aos

只需要给需要产生动画效果的元素加个自定义属性即可，比如题主有5屏：

<div data-aos="fade-in">1</div><div data-aos="fade-in">2</div><div data-aos="fade-in">3</div><div data-aos="fade-in">4</div><div data-aos="fade-in">5</div>

js 也很简短，在 DOM 初始化完成时调用下 init

document.addEventListener('DOMContentLoaded', function() {    AOS.init(); // init 可以传个配置对象，写需要的属性，具体参考文档});

更细节的配置可以在 AOS.init({}) 或者 data-aos 属性中写

参考链接
官方演示 （可以去里面找类名）
官方文档（配置在这里看）