在vue3中使用wow.js和animate.css 动画

1. 安装依赖

首先，你需要安装 animate.css 和 wow.js。你可以使用 npm 或 yarn 安装它们：

npm install animate.css wow.js
# 或者
yarn add animate.css wow.js

2. 配置项目

在 main.js 中引入

在你的 main.js 文件中引入 animate.css 和初始化 wow.js：

import { createApp } from 'vue';
import App from './App.vue';

//引入动画
import 'animate.css';
import WOW from 'wow.js';

const app = createApp(App);

// 初始化 WOW.js
const wow = new WOW();
wow.init();

app.mount('#app');

在 App.vue 或其他组件中使用

在你的组件中，你可以按照 wow.js 的使用说明来添加动画类和 data-wow-* 属性。

<template>
  <div>
    <h1 class="wow animate__animated animate__fadeIn" data-wow-duration="2s">
      Hello, World!
    </h1>
    <p class="wow animate__animated animate__bounceIn" data-wow-delay="1s">
      This is a paragraph with animation.
    </p>
  </div>
</template>

<script setup>
// 如果需要，可以在这里添加脚本逻辑
</script>

<style>
/* 如果需要，可以在这里添加样式 */
</style>

确保动画生效

• animate.css：提供了各种预定义的动画类，例如 animate__fadeIn 和 animate__bounceIn。你可以查看 animate.css 文档 来获取更多动画类名。

• wow.js：触发动画的 JavaScript 库。你需要在元素上添加 wow 类，并结合 animate.css 的动画类，设置 data-wow-* 属性来配置动画选项。

配置选项

wow.js 支持一些配置选项，例如：

• offset：触发动画的视口偏移量。
• mobile：是否在移动设备上启用动画。
• live：是否动态监听 DOM 变化来触发动画。

你可以在初始化 WOW 实例时传递这些选项，例如：

const wow = new WOW({
  offset: 100,
  mobile: true,
  live: true
});
wow.init();

总结

通过这些步骤，你可以在 Vue 3 项目中成功集成并使用 wow.js 和 animate.css，为你的页面元素添加动感的动画效果。这样不仅可以提升用户体验，还可以使页面更具吸引力