Web前端：vue 路由过渡动效

作者:Jade_g更新于： 2020-02-26 14:34:52

　　Vue系列产品为3D自然环境的动画制作和渲染提供了一系列的解决方案。Vue系列有很多不同的产品，这是为了满足不同阶层的用户的需要:能够直接满足专业的制作工作室，同样也能满足3D自由艺术家。

　　是基本的动态组件，所以我们能够直接用组件给它添加一些过渡效果：

　　过渡的类名

　　在进入/离开的过渡里面，会有6个class切换。

　　v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

　　v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类能够直接被用来定义进入过渡的过程时间，延迟和曲线函数。

　　v-enter-to:2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效(与此同时v-enter被移除)，在过渡/动画完成之后移除。

　　v-leave:定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

　　v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类能够直接被用来定义离开过渡的过程时间，延迟和曲线函数。

　　v-leave-to:2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效(与此同时v-leave被删除)，在过渡/动画完成之后移除。

　　对于这些在过渡中切换的类名来说，假如说大家使用了一个没有名字的，则v-是这些类名的默认前缀。如果你使用了，那么v-enter会替换为my-transition-enter。

　　ProPS：

　　name-string，用于自动生成css过渡类名。例如：name:'fade'将自动拓展为.fade-enter，.fade-enter-active等。默认类名为"v"

　　appear-boolean，是否在初始渲染时使用过渡。默认为false。

　　css-boolean，是否使用CSS过渡类。默认为true。如果设置为false，将只通过组件事件触发注册的Javascript钩子。

　　type-string，指定过渡事件类型，侦听过渡何时结束。有效值为"transition"和"animation"。默认Vue.js将自动检测出持续时间长的为过渡事件类型。

　　mode-string，控制离开/进入过渡的时间序列。有效的模式有"out-in"和"in-out"；默认同时进行。

　　duration-number|{enter:number,leave:number}指定过渡的持续时间。默认情况下，Vue会等待过渡所在根元素的第一个transitionend或animationend事件。

　　过渡模式mode：

　　1.in-out:新元素先进入过渡，完成之后当前元素过渡离开。

　　2.out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。

　　具体的示范例子如下所示：

　　.slide-left-enter{opacity:0;-webkit-transform:translate(30px,0);transform:translate(30px,0);}.slide-left-enter-active{transition:all.5sease;}.slide-left-leave-to{opacity:0;-webkit-transform:translate(-30px,0);transform:translate(-30px,0);}.slide-left-leave-active{transition:all.5sease;}

　　VUE(VirtualUniversityEnterprises)是NCSPearson的一个分部，它通过分布在110多个国家(或地区)的全球考试中心网络提供全部的MCP考试。