Vue3实现滚动加载动画效果
2023-09-14 09:13:58 时间
滚动加载动画
实现效果:滚到到指定元素后,该元素才执行对应动画
依赖配置
实现该效果,需要借助两个库: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 动态添加!!!
<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>
相关文章
- Vue3, setup语法糖、Composition API全方位解读
- Vue3 最长递增子序列详解
- 在 Vue3 中使用 IPFS 分布式存储和共享文件
- Vue3中的列表渲染v-for基本用法
- Vue3系列教程之插槽slot详解
- Vue3根据动态字段绑定v-model
- 2021年最佳VUE3 UI框架推荐
- vue2和vue3响应式实现区别
- Vue3文件拖拽上传
- vue3 + elemenplus实现导航栏
- 1.5k Star国产开源一款基于Vue3+Socket.IO的极简聊天应用,比较完整,略好看
- 尤雨溪: Vue3 将不会支持 IE11!VSCode 1.55 稳定版发布,更新了 9 个亮点!
- vue3溢出文本tooltip或title展示解决方案—如何获取文本宽度
- vue3中 toRefs和 toRef 的区别
- Vue2与Vue3的响应式【代理对象:Proxy 反射对象:Reflect的实例学习】