滚动加载动画
实现效果:滚到到指定元素后,该元素才执行对应动画
依赖配置
实现该效果,需要借助两个库:wow.js以及animate.css
并且由于wow 依赖于 animate 动画库,所以
安装 animate.css
以及 wow.js
npm install animate.css --save
npm install wow.js --save
配置动画
首先写一个简单的页面
提供两个元素,第一个为占据全屏(是为了提供滚动空间)的 div,第二个为模拟需要执行动画的卡片
<template>
<div class="container">
<!-- 占据全屏 -->
<div class="before">index</div>
<!-- 欲执行动画的div -->
<div class="after">after</div>
</div>
</template>
<script setup></script>
<style scoped lang="less">
.container {
width: 100%;
.before {
width: 100%;
height: 100vh;
background-color: antiquewhite;
}
.after {
width: 40%;
height: 40vh;
background-color: aquamarine;
}
}
</style>
修改第二个元素,填入你想要执行的动画 class,类名可以直接在 animate.css
官网找到
除此之外,还有一个 scroll-item
类,这是为了让 wowjs 获取该 DOM 的标记
注意!这里先不要为元素添加
animate__animated
类名,这个在后面留给 wowjs 动态添加!!!扫描二维码关注公众号,回复: 14584672 查看本文章
<template>
<div class="container">
<div class="before">index</div>
<div class="after scroll-item animate__fadeInRight">after</div>
</div>
</template>
初始化 wowjs 代码,由于使用 vue3,对于 DOM 操作必须放在 onmounted 钩子执行
wowjs 的实现原理是:在滚动到指定元素位置时,动态的添加一个 class,使其具有动画切换效果,比如下方我们动态添加了类名 animate__animated
,这就使得 animate.css
得以启动并执行动画
<script setup>
import "animate.css";
import Wow from "wow.js";
import {
onMounted } from "vue";
onMounted(() => {
const wow = new Wow({
// 对所有拥有该class的元素挂载动画
boxClass: "scroll-item",
// 需要挂载的动画元素
animateClass: "animate__animated",
// 偏移值(即偏移一定距离后再执行动画,推荐设置!)
offset: 100,
// 移动设备是否生效
mobile: true,
// 是否支持异步
live: true,
});
wow.init();
});
</script>