animation.css动画效果:https://daneden.github.io/animate.css
github主页：https://github.com/daneden/animate.css
本例子效果：
本次要实现效果是friends数据中每一项都添加动画效果，并且从左侧依次进入。
效果.gif
安装animation.css：
要使用动画就先输入以下命令安装
npm install animate.css -save
在main.js文件中引入并使用
import animate from 'animate.css'
Vue.use(animate)
image.png
使用animation动画
模板图.png
小知识点：
1.自定义过渡类名
自定义过渡类名优先级比普通类名高，所以只要将其设置成animation需要动画类就可以实现简单动画。
如本次例子中
enter-active-class="animated bounceInLeft"
leave-active-class="animated bounceOutLeft"设置。
自定义过渡类名包括：
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
2.列表过渡transition-group
使用v-for要渲染整个friend列表时，需要使用<transition-group>组件,同时要注意以下几点：
friend列表中的每一项有唯一属性值，如
该元素默认会渲染为<span>,，你也可以通过tag特性替换，如模板图中的tag="div"
动画延迟显示animation-delay
以上可以实现动画，但没有依次从左侧进入，要列表中每一项都依次从左侧进入，需添加animation-delay。
在method中添加以下方法
image.png
方法中打印值显示
image.png
image.png
代码样例：
<template>
<div class="helloWord">
<h3>朋友列表</h3>
<div id="list">梧桐芊雨
<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>
</div>
</div>
</template>
<script>
import axios from 'axios'
import Sortable from 'sortablejs'
export default {
name: 'HelloWorld',
data () {
return {
friends: [],
sortList: Object
}
},
methods: {
getFriend () {
axios.get('../../static/mock/friend.json').then(this.getFriendInfo)
},
getFriendInfo (res) {
if (res.data.success) {
this.friends = res.data.data.friend
}
},
onUpEvent (e) {
var item = this.friends[e.oldIndex]
console.log(item)
this.friends.splice(e.oldIndex, 1)
this.friends.splice(e.newIndex, 0, item)
},
beforeEnter (el) {
console.log('打印dom元素',el)
// el.style.animationDelay = "4s"
},
enter (el, done) {
let delayNum = '.'+el.dataset.index * 100 + 's'
el.style.animationDelay = delayNum
console.log('输出值效果', delayNum, el.dataset, el, done)
}
},
mounted () {
this.getFriend()
var $ul = this.$el.querySelector('#list')
this.sortList = Sortable.create($ul, {
handle: '.cellmat',
animation: 150,
ghostClass: 'blue-background-class',
onUpdate: (event) => {
console.log('event值为：', event, event.newIndex, event.oldIndex)
this.onUpEvent(event)
}
})
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
若感兴趣，可以阅读下vue关于动画篇章地址：https://cn.vuejs.org/v2/guide/transitions.html#%E5%88%97%E8%A1%A8%E8%BF%87%E6%B8%A1
