在vue中使用Animate.css
阿新 • • 發佈：2020-08-05
Animate.css是一個有趣的，跨瀏覽器的css3動畫庫。很值得我們在專案中引用。
外掛描述: Animate.css內建了很多典型的css3動畫，相容性好使用方便。
一：基本用法(把animate.css下載到本地，直接引入)
| 1 |
< head > < link rel = “ stylesheet ” href = “ animate.min.css ” > </ head >
|
或使用由CDNJS託管的版本
| 1 |
< head > < link rel = “ stylesheet ” href = “ https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css ” > </ head >
|
我們在Vue專案中可以在main.js裡引入animate.css
2.0版本 import './assets/styles/animate.css';
二：基本使用
用transition 包裹，併為其加上 animated class名(必加) 第二個class名就是我們想要的動畫效果
可以去https://www.dowebok.com/demo/2014/98/ 網站看效果演示，並把類名複製貼上過來
| 1 2 3 |
<transition class="animated bounce">
<HomeRecommend></HomeRecommend>
</transition>
|
這樣一個簡單的轉場動畫就完成啦！！
當然，我們可以封裝 轉場動畫的元件：
程式碼：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<template>
<div>
<!-- 公共動畫元件-->
<transition>
<slot></slot>
</transition>
</div></template>
<script>
exportdefault{
name:"FadeAnimation"
}
</script>
這裡的css樣式必加哦
<style lang="stylus"scoped>
.v-enter, .v-leave-to
opacity0
.v-enter-active, .v-leave-active
transition:opacity2s
</style>
|
需要使用的時候：
引入並配置：
infinite可以無限迴圈| 1 2 |
// 轉場動畫元件
import FadeAnimation from"../../common/fade/FadeAnimation";<br><br>
|
components: {
FadeAnimation
},
使用：
| 1 2 3 |
<FadeAnimation>
<Gallary></Gallary>
</FadeAnimation>
|