目录
一、过渡动画
二、transition组件
三、transition的显示的CSS类名
四、transition的隐藏的CSS类名
五、互斥动画
示例：
六、设置动画过程中的监听回调
七、列表过渡动画
一、过渡动画
在组件的插入、移除、更新时可以附带转场效果，即使用过渡动画。
二、transition组件
在vue中内置了transition组件,可以用它来包装要展示过渡动画的的组件，在transition组件的name属性指定要执行的动画的名称，vue约定了一系列CSS类名来定义各个过渡过程中组件的状态。
<transition name=“动画名称”>
组件
</transition>
三、transition的显示的CSS类名
动画名-enter-from ：表示动画开始
动画名称-enter-active：整个运动状态
动画名称-enter-to：结束状态
四、transition的隐藏的CSS类名
动画名-leave-from：离开时的状态
动画名-leave-active：离开过渡生效时的状态
动画名-leave-to：离开的结束状态
五、互斥动画
是多个组件的过渡动画。即当一个元素显示时,其他元素隐藏。
示例：
test.vue代码段：
<template><h2>动画测试</h2><button @click="myClick">显示/隐藏</button><transition name="ani"><div v-if="show" class="demo"></div><div v-else class="demo2"></div></transition></template><script>export default {name: "Test",data(){return {show : false}},methods:{myClick(){this.show = !this.show}}}</script><style scoped>.demo{width: 100px;height: 100px;background-color: blue;}.demo2{width: 100px;height: 100px;background-color: red;}.ani-enter-from {width: 0px;height: 0px;background-color: red;}.ani-enter-active{transition: width 2s , height 2s, background-color 2s;}.ani-enter-to{width: 100px;height: 100px;background-color: blue;}.ani-leave-from{width: 100px;height: 100px;background-color: blue;}.ani-leave-active{transition: width 2s , height 2s, background-color 3s;}.ani-leave-to{idth: 0px;height: 0px;background-color: red;}</style>App.vue代码段：
import Test from "./components/Test.vue";<template><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /><Test/></template>
六、设置动画过程中的监听回调
表示在组件的加载或卸载过程中，有一系列的生命周期函数被调用。
@before-enter=“beforeEnter”
@enter=“enter”
@after-enter=“afterEnter”
@before-leave=“beforeLeave”
@leave=“Leave”
@after-leave=“afterLeave”
One.vue代码段：
<template><button @click="myClick">显示/隐藏</button><transition name="ani"@before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"@before-leave="beforeLeave"@leave="Leave"@after-leave="afterLeave"><div v-if="show" class="demo"></div></transition></template><script>export default {name: "One",data(){return{show:false}},methods:{myClick(){this.show = !this.show},beforeEnter(){console.log('beforeEnter')},enter(el,done){console.log('动画开始'+el)console.log(done)},afterEnter(el){console.log('afterEnter')},beforeLeave(el){console.log('beforeLeave')},Leave(el){console.log('leave')},afterLeave(){console.log('afterLeave')}}}</script><style scoped>.demo{width:100px;height: 100px;background-color: blue;margin-bottom: 10px;}.ani-enter-from{width:0px;height:0px;background-color: red;}.ani-enter-active{transition:width 2s ,height 2s,background-color 2s;}.ani-enter-to{width:100px;height: 100px;background-color: blue;}.ani-leave-from{width: 100px;height: 100px;background-color: blue;}.ani-leave-active{transition: width 2s , height 2s, background-color 3s;}.ani-leave-to{idth: 0px;height: 0px;background-color: red;}</style>App.vue代码段：
import One from "./components/One.vue"<template><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /><One/></template>
七、列表过渡动画
使用来实现列表元素的动画效果
注意：若使用列表动画,列表中的每个元素(列表项)必须要有一个唯一的key值
ListDemo.vue代码段：
<template><button @click="myClick">添加元素</button><button @click="delClick">删除元素</button><transition-group name="list"><div v-for="(item,index) in items" :key="index">元素：{{ item }}</div></transition-group></template><script>export default {name: "ListDemo",data(){return {items: [1,2,3,4,5]}},methods:{myClick(){this.items.push(this.items[this.items.length-1]+1)},delClick(){if (this.items.length > 0){this.items.pop()}}}}</script><style scoped>.list-enter-active,.list-leave-active {transition: all 1s ease;}.list-enter-from,.list-leave-to{opacity: 0;}</style>App.vue代码段：
import ListDemo from "./components/ListDemo.vue";<template><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /><ListDemo/></template>
