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>
export
default
{
name:
"FadeAnimation"
}
</script>
这里的css样式必加哦
<style lang=
"stylus"
scoped>
.v-enter, .v-leave-to
opacity
0
.v-enter-active, .v-leave-active
transition:opacity
2
s
</style>
|
需要使用的时候：
引入并配置：
infinite可以无限循环
|
1
2
|
// 转场动画组件
import FadeAnimation from
"../../common/fade/FadeAnimation"
;<br><br>
|
components: {
FadeAnimation
},
使用：
|
1
2
3
|
<FadeAnimation>
<Gallary></Gallary>
</FadeAnimation>
|