Vue3实现滚动加载动画效果
创始人
2024-06-03 19:37:00

目录

      • 滚动加载动画
        • 依赖配置
        • 配置动画

滚动加载动画

实现效果：滚到到指定元素后，该元素才执行对应动画


依赖配置

实现该效果，需要借助两个库：wow.js以及animate.css

并且由于wow 依赖于 animate 动画库，所以

安装 animate.css 以及 wow.js
npm install animate.css --save
npm install wow.js --save


配置动画

首先写一个简单的页面

提供两个元素，第一个为占据全屏（是为了提供滚动空间）的 div，第二个为模拟需要执行动画的卡片

修改第二个元素，填入你想要执行的动画 class，类名可以直接在 animate.css 官网找到

除此之外，还有一个 scroll-item 类，这是为了让 wowjs 获取该 DOM 的标记

注意！这里先不要为元素添加 animate__animated 类名，这个在后面留给 wowjs 动态添加！！！

初始化 wowjs 代码，由于使用 vue3，对于 DOM 操作必须放在 onmounted 钩子执行

wowjs 的实现原理是：在滚动到指定元素位置时，动态的添加一个 class，使其具有动画切换效果，比如下方我们动态添加了类名 animate__animated ，这就使得 animate.css 得以启动并执行动画

上一篇：计算机网络4小时速成：如何根据IP地址和子网掩码计算自己的网段和ip可用范围？

下一篇：大数据-学习实践-4MapReduce

相关内容

热门资讯

新宏泽股价涨5.01%，申万菱... 1月15日，新宏泽涨5.01%，截至发稿，报16.36元/股，成交1.02亿元，换手率2.77%，总...
云铝股份股价涨5.11%，中欧... 1月15日，云铝股份涨5.11%，截至发稿，报34.36元/股，成交20.85亿元，换手率1.80%...
云铝股份股价涨5.11%，天弘... 1月15日，云铝股份涨5.11%，截至发稿，报34.36元/股，成交20.87亿元，换手率1.80%...
云铝股份股价涨5.11%，光大... 1月15日，云铝股份涨5.11%，截至发稿，报34.36元/股，成交20.89亿元，换手率1.80%...
艾融软件股价跌5.01%，华泰... 1月15日，艾融软件跌5.01%，截至发稿，报50.01元/股，成交2.04亿元，换手率3.31%，...