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> |