在vue中使用Animate.css

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 2s </style>

　　需要使用的时候：

引入并配置：

infinite可以无限循环

1 2	// 转场动画组件     import FadeAnimation from "../../common/fade/FadeAnimation";<br><br>

components: {
  FadeAnimation
},

使用：

1 2 3

<FadeAnimation>       <Gallary></Gallary> </FadeAnimation>