vue animate.css


Install

  • with npm
    npm install v-animate-css --save-dev
  • with yarn
    $ yarn add animate.css
  • using a CDN
1
2
3
4
 <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
  />

Usage

1
2
3
4
//main.js  引用
import Vue from 'vue';
import AnimateCss from 'animate.css' / 'v-animate-css';
Vue.use(AnimateCss);
1
2
3
4
5
6
7
自定义过渡类名包括：
        enter-class
        enter-active-class
        enter-to-class
        leave-class
        leave-active-class
        leave-to-class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<button @click="show = !show">Toggle show</button>
 <transition namef=""
          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("动画进入之后")
          }

1
2
3
4
列表过渡transition-group
v-for渲染时，需要使用<transition-group>组件,同时要注意以下：
列表中的每一项有唯一属性值，
该元素默认会渲染为<span>,，可以通过tag特性替换，tag="div"
1
2
3
4
5
6
7
8
9
10
11
      <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>