使用 Animate.css 實現轉場動畫

Animate.css是一個有趣的，跨瀏覽器的css3動畫庫。很值得我們在項目中引用。

插件描述: Animate.css內置了很多典型的css3動畫，兼容性好使用方便。

一：基本用法(把animate.css下載到本地，直接引入)

< head > < link rel = “ stylesheet ” href = “ animate.min.css ” > </ head >

　　或使用由CDNJS托管的版本

< 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/ 網站看效果演示，並把類名復制粘貼過來

 <transition class="animated bounce">
      <HomeRecommend></HomeRecommend>
  </transition>

　　這樣一個簡單的轉場動畫就完成啦！！

當然，我們可以封裝 轉場動畫的組件：

代碼：

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

　　需要使用的時候：

引入並配置：

// 轉場動畫組件
    import FadeAnimation from "../../common/fade/FadeAnimation";

components: {
  FadeAnimation
},

使用：

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

　　附上效果: 簡單潦草