Vue3 animate.css + wowjs 官网实现滚动到对应元素位置增加动画特效

本人在Vue3中使用的是 setup语法糖 也就是

<script setup>...</ script>

在项目中install一下两个插件：

yarn add animate.css
npm install animate.css // 我使用的版本是@3.5.1

yarn add wowjs
npm install wowjs // 版本@1.1.3

之后在main.js文件内引入 animate.css

import animated from "animate.css";
Vue.use(animated);

animate.css用法很简单 就是在元素标签内写class类名

<div class="animated fadeIn"></div>
<div class="animated fadeOut"></div>

注意 类名中的 animated 是必须有的

再说一下wowjs的用法，把wowjs包下载好之后 只需要在一个.vue后缀的文件内调用即可

自己的项目是分组件写的 所以把方法写在了最外层的Home.vue文件内 具体方法如下

<script setup>

import { onMounted } from "vue";
import { WOW } from "wowjs";

onMounted(() => {
　　new WOW({
　　　　live: false // 当时为了解决警告问题 想查看所有属性可去官网了解  https://wowjs.uk/docs.html
   }).init();
})

</ script>

之后在需要用到动画的元素的类名上增加 "wow" 类名

<div class="wow animated fadeInUp"></div>
// 注意：想实现滚动到元素展示动画效果 元素类名必须有 "wow animated 动画效果 ..."