vue animate.css

Install

• with npm
  npm install v-animate-css --save-dev
• with yarn
  $ yarn add animate.css
• using a CDN

 <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
  />

Usage

//main.js  引用
import Vue from 'vue';
import AnimateCss from 'animate.css' / 'v-animate-css';
Vue.use(AnimateCss);

自定义过渡类名包括：
		enter-class
		enter-active-class
		enter-to-class
		leave-class
		leave-active-class
		leave-to-class

<button @click="show = !show">Toggle show</button>
 <transition name="custom-classes-transition" 
          enter-active-class="animated fadedIn" //进入
          leave-active-class="animated fadedOut"//离开
          :duration="{enter:100,leave:100}" //延迟时间  
           //v-on:/：/@监听
          v-on:before-enter="beforeEnter(ele)"  
          :enter="enter(ele)" 
          @after-enter="afterEnter(ele)" 
>
<div class="block" v-if="show">动画内元素靠show判断是否显示</div> 
</transition>
          beforeEnter(ele，done){
              ele.style.opacity= 0;
              ele.style.transformOrigin=center;
                console.log("动画进入之前");
                done();  //继续下一个
          }
          enter(ele){
                console.log("动画进入");
                Velocity=({},{})
          }
          afterEnter(ele){
                console.log("动画进入之后")
          }

列表过渡transition-group
v-for渲染时，需要使用<transition-group>组件,同时要注意以下：
列表中的每一项有唯一属性值，
该元素默认会渲染为<span>,，可以通过tag特性替换，tag="div"

      <transition-group
        enter-active-class="animated bounceInLeft"
        leave-active-class="animated bounceOutLeft"
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        tag="div">
        <mt-cell class="cellmat" v-for="(item, index) in friends" v-bind:key="item.id"
          :title="item.name"
          :value="item.address"
          :data-index="index"></mt-cell>
      </transition-group>