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>