| 先看一个示例 
代码如下 <template> <div align="center" style="margin-top: 100px;"> <button @click="show= !show" >测试</button> <transition> <div v-if="show"> <p>这是一段文字</p> </div> </transition> </div></template><script>export default { name: 'transitionTest', data () { return { show: true } }}</script><style scoped> .v-enter-active, .v-leave-active { transition: all .5s ; } .v-enter { transform: translateY(50px); opacity: 0; } .v-leave-active { transform: translateY(50px); opacity: .5; }</style>包裹了一个div组件，点击按钮实现动画效果。一般搭配v-if、v-show、动态组件、组件根节点来使用。
transition钩子函数transition提供六个钩子函数，提供给我们在不同时机编写相应的动画效果。以下是此六个钩子函数执行时机 1.v-enter：进入过渡开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 2.v-enter-active：进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 3.v-enter-to:进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。 4.v-leave: 离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 5.v-leave-active：离开过渡生效时的状态。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 6.v-leave-to:离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除
自定义过渡类名在页面中有多个地方需要进行过渡效果，如果使用vue提供的默认那6个钩子函数，那么所有要过渡地方的过渡效果都是一样的。如果需要在不同的场合定义不同的动画效果，就需要我们自己定义专属于各个过渡效果的类名。解决办法给transition标签添加name属性，在name属性中写入自己的类名前缀。例如，那么在使用类名的时候就是这样的：.my-trans-leave、.my-trans-enter-to。如： <transition name="my-trans" mode="out-in"> <router-view v-if="!$route.meta.keepAlive"></router-view> </transition> style写法，my-trans是“.my-trans-enter-active”的前缀 <style> .my-trans-enter-active, .my-trans-leave-active { transition: all .2s; opacity: 1; } .my-trans-enter { transition: all .2s; opacity: 0; } .my-trans-leave-to { transition: all .2s; opacity: 0; } </style>
transition-group使用对列表进行过渡渲染时，就必须使用transition-group元素包裹。点击列表中内容，按照以下动画移除，示例如下 
<template> <div class="main_css"> <transition-group name="slide"> <li v-for="(item,i) in list" :key="item.id" @click="del(i)"> {{ item.id }} --- {{ item.name }} </li> </transition-group> </div></template><script>export default { name: 'transitionGroupTest', data () { return { list: [{ id: 1, name: '红烧鱼' }, { id: 2, name: '炒土豆' }, { id: 3, name: '烧茄子' } ] } }, methods: { del (i) { this.list.splice(i, 1) } }}</script><style scoped> .main_css { margin-left: 50px; margin-top: 50px; } .slide-enter-active { transition: all .5s linear; } .slide-leave-active { transition: all .1s linear; } .slide-enter { transform: translateX(-100%); opacity: 0; } .slide-leave-to { transform: translateX(110%); opacity: 0; }</style>
小结过度与动画，使用transition标签完成，同时提供6个钩子函数。全局动画在app.vue中，在router-view组件中包裹transition，如：；给transition标签添加name属性定义过渡类名，实现局部变化。 以上就是详解vue过度与动画transition使用示例的详细内容，更多关于vue过度与动画transition的资料请关注51zixue.net其它相关文章！
下载地址:
React组件的生命周期详细描述
vue3 非父子组件通信详解 |
