vue3 中使用wowjs
时间: 2023-11-12 12:13:37 浏览: 53
要在Vue3中使用wowjs,需要先安装wowjs:
```
npm install wowjs
```
接下来,在需要使用wowjs的组件中,引入wowjs和其样式文件:
```javascript
import WOW from 'wowjs'
import 'wowjs/css/libs/animate.css'
```
在组件的mounted钩子函数中,初始化wowjs:
```javascript
mounted() {
new WOW.WOW().init();
}
```
最后,在需要添加动画效果的元素上,添加wow和动画类名即可:
```html
<div class="wow animate__animated animate__bounceIn">Hello World</div>
```
其中,animate__animated是动画库的类名前缀,animate__bounceIn是具体的动画类名,可以在animate.css中查找。
完整代码示例:
```vue
<template>
<div class="container">
<h1 class="wow animate__animated animate__bounceIn">Vue 3 + Wow.js</h1>
<p class="wow animate__animated animate__fadeIn">Add animation to your Vue 3 project easily with Wow.js</p>
</div>
</template>
<script>
import WOW from 'wowjs'
import 'wowjs/css/libs/animate.css'
export default {
mounted() {
new WOW.WOW().init();
}
}
</script>
<style>
.container {
text-align: center;
padding: 50px;
}
h1, p {
margin-bottom: 20px;
}
</style>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)