vue巧用过渡效果(总结)

Vue提供过渡组件，实现组件过渡和路由过渡。合理使用这个组件可以使我们的页面更加灵活，提高用户体验。

概念

进/出的过渡中，会有6个类切换，会复制一张官方图片

V-enter:定义转换的开始状态。它在元素插入前生效，并在元素插入后的下一帧被移除。V-enter-active:定义转换生效时的状态。在整个过渡阶段应用，在元素插入前生效，并在过渡/动画完成后将其移除。该类可用于定义进入过渡的过程时间、延迟和曲线函数。V-enter-to:版本2.1.8及以上定义了过渡的结束状态。下一帧在元素插入后生效(同时，v-enter被移除)，并在过渡/动画完成后被移除。V-leave:定义离开转换的起始状态。当出发转换被触发时，它立即生效，并且下一帧被移除。v-休假-激活：定义休假过渡生效时的状态。它应用于离开过渡的整个阶段，在离开过渡被触发时立即生效，并在过渡/动画完成后被移除。该类可用于定义离开过渡的过程时间、延迟和曲线函数。v-leave-to :版本2.1.8及以上定义了离开转换的结束状态。下一帧在触发离开过渡后生效(同时删除v-leave)，并在过渡/动画完成后删除。看起来还是有点乱。让我们先抚摸它。

Enter定义开始状态，active定义过程，enter定义结束，但实际实现中存在交集。它可以通过断点找到，

添加v-enter添加v-enter-active，卸载v-enter添加v-Ernst-to卸载v-enter-to和v-enter-active//transit : all 2s；move-enter { margin-left : 0；} .move-enter-active { margin-left : 100 px；} .move-enter-to { margin-left : 200 px；}比如在上述情况下，过渡动画将如何进行？

这里要注意两点。

回车-激活覆盖了回车的起始位置，并且经历了两次转换。enter-to在active结束后开始，因此它在第四秒钟返回到dom元素本身的位置。因此，官方文件也使用v-enter来定义起始位置，并控制enter-active中的效果。

使用类实现过渡效果

在这六类之上，使用转场或者动画可以达到我们需要的效果。比如栗子，这里我们直接把所有的路线变化定义为过渡效果。

“出现”属性指示页面在首次加载时也适用于动画

过渡出现名称=' move ' router-view/router-view/transition @关键帧animation in { 0% { transform : translate(-100%，0)；} 100% { transform : translate(0，0)；} } @关键帧动画输出{ 0% { transform: translate(0，0)；} 100% { transform : translate(100%，0)；}}.move-enter { transform : translate(-100%，0)；绝对位置：重要；z-index : 999；top : 0；left : 0；宽度： 100%；}.移动-进入-激活{ animation : animation in 0.2s；绝对位置：重要；//输入的组件应覆盖删除的组件，请参考//https://cn . vuejs . org/v2/guide/transitions . html # transition mode z-index : 999；top : 0；left : 0；宽度： 100%；}.move-leave { transform : translate(0，0)；}.移动-离开-激活{ animation : animation out 0.2s；}效果

JavaScript挂钩

这些钩子函数可以与CSS过渡/动画结合使用

过渡v-: before-enter=' before enter ' v-: enter=' enter ' v-: after-enter=' after enter ' v-: enter-canceled=' enter canceled ' v-3 3360 before-leave=' before leave ' v-: leave=' leave ' v-: after-leave=' after leave ' v-3360 leave-canceled=' leave canceled '！-.- /transition在这些钩子中，可以使用其他第三方库。回调中的el将是一个真正的dom元素。这里，官方推荐的Velocity.js被用作动画库

div class='main '转换名称='showRect '出现@ before-enter=' handlebeforenter ' @ enter=' handleEnter ' @ after-enter=' handlebefore ' @ before=' handlebefore ' @ leaf=' handlebefore ' @ after-leaf=' handlebefore ' : CSS=' false ' div class=' box ' v-if=' show '/div/transition/div按钮@单击='开始'切换/button methods : { start(){ this。show=！this.show }，handleBeforeEnter:函数{埃尔。风格。不透明度=0；console.log('方块显示动画即将执行');}，handleEnter:函数(el，done) { Velocity(el，‘stop’)；Velocity(el，{ backgroundColor: '#0085eb '，opacity: 1，translateX: 260，rotateZ: ['360deg '，0] }，{ duration: 1000，eas :[0.4，0.01，0.165，0.99 ]，complete : done })；console.log('方块显示动画执行中.');}，handleAfterEnter:函数(el) { console.log('方块显示动画结束');}，handleBeforeLeave:函数(el) { console.log('方块隐藏动画即将执行');}，handleLeave:函数(el，done) { Velocity(el，‘stop’)；Velocity(el，{ backgroundColor: '#4dd0e1 '，opacity: 0，translateX: 0，rotateZ: [0，' 360deg'] }，{ duration: 1000，eas :[0.4，0.01，0.165，0.99 ]，complete : done })；console.log('方块隐藏动画执行中.');}，handleAfterLeave:函数(el) { console.log('方块隐藏动画结束');} }

列表过渡

某视频剪辑软件还提供了过渡群组件，作为列表过渡的容器

不同于，它会以一个真实元素呈现：默认为一个。你也可以通过标签特性更换为其他元素

过渡群拥特别的v形移动属性，它会在元素的改变定位的过程中应用，效果可参见官网。

其他的就不抄官网了

列表过渡中，可以结合射流研究…钩子，实现一些特殊的效果

举个栗子

模板div class=' btn ' @单击='addItem '添加/div class=' BTN ' @单击=“排序”排序/div class=' box ' div class=' item-bar '过渡-组名='褪色'标记='p '出现输入前v-:='输入前'输入后v-:='输入后'//这里的数据索引是一个识别标识，便于在射流研究…钩子中获得当前元素的序号div class='item' v-for='(i，index)在列表：键=' I ' :数据-索引='索引' { I } }/div/转换-组/div/div/模板脚本lang=' ts '从Vue '导入Vue导出默认的Vue.extend({ name: 'home '，data() { return { show: true，list: [5，4，3，2，1]，next num 3360 6 }；}，方法： { show DoM(){ this。show=！this.show }，beforeEnter:函数(El : any){ El。风格。不透明度=0//每个元素插入之前，透明度为0让索引=el.dataset.index每次可能插入多个元素， //页面加载时先展示5个如果(索引5) { //设置动画延迟，实现按续插入的效果埃尔。风格。animationdelay=El。数据集。索引* 0.3的' }，之后输入：函数(El){ El。风格。不透明度=1控制台。log(' enter '后)}，addItem(){ this。名单。推(这个。nextnum)}，sort(){ this。列表=这个。名单。sort((a，b)=a-b)} })；/script @关键帧动画{ 0% {左边距-: 300像素；opa城市3360 0；} 100% { margin-left : 0；opa城市3360 1；} } .淡入{ opa city 3360 0；左边距left: 300px}。淡入激活{ opa city 3360 0；动画：动画1s；} .淡入到{ opa city 3360 1；左边距-: 0;} .渐变移动{ transition: all 0.3s }。淡入淡出{ left: 10px}。淡入淡出活动{ transition:所有2s淡出；} .淡入淡出到{左：-100%；}效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。