vue3 项目中使用wow.js和animate.css

踩坑：
vue3 项目中使用wow.js和animate.css，本来是很简单的东西，可安装的时候一直出问题，后来发现： vue3不支持wowjs vue3换成了wow.js 这是两个不一样的

接下来就简单说一下：

安装 WOW.js

	pnpm add  WOW.js

安装 animate.css

	pnpm add animate.css 

在 Vue3 项目中，我们需要在 main.js 文件中引入 WOW.js 和 Animate.css：

	// src/main.js

	import { createApp } from 'vue'
	import App from './App.vue'
	import 'animate.css';
	
	const app = createApp(App)
	
	app.mount('#app')
	

在组件中使用 WOW.js 和 Animate.css 了。接下来，我们在默认的 Home.vue 组件中添加一些动画效果。

	// src/views/Home.vue 
	
	<template>
	  <div class="home">
	    <h1 class="wow animate__animated animate__fadeIn">Welcome</h1>
	    <p class="wow animate__animated animate__zoomIn" data-wow-delay="0.5s">
	     hellow
	    </p>
	    <button class="wow animate__animated animate__bounceIn" data-wow-delay="1s">
	      Click Me!
	    </button>
	  </div>
	</template>
	
	<script setup lang="ts">
		import { onMounted } from "vue";
		import WOW from "wow.js";
		 
		onMounted(async () => {		  
		  const wow = new WOW({
		    boxClass: "wow",
		    animateClass: "animated",
		    offset: 0,
		    mobile: true,
		    live: true,
		    callback: function () {
		    },
		    scrollContainer: null,
		    resetAnimation: true,
		  });
		  wow.init();
		});
	</script>
	
	<style scoped>
		.home {
		  text-align: center;
		  margin-top: 60px;
		}
	</style>

	data-wow-duration：更改动画持续时间
	data-wow-delay：动画开始前的延迟
	data-wow-iteration：动画的次数重复（无数次：infinite）
	data-wow-offset：开始动画的距离

这些属性直接下载标签里就可以了。

这样我们就可以进行页面的滚动动画了

传送门：

• animate.css
• wowjs