没有更多推荐了，
不良信息举报
举报内容：
vue中路由切换动画效果(transition)
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！一、实现动画过渡效果的几种方式
实现动画必须要将要进行动画的元素利用&transition&标签进行包裹
1、利用CSS样式实现过渡效果
&&transition name="fade"&&/transition&
v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在&transition/animation&完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在&transition/animation&完成之后
通过name的名称进行重命名，在样式文件中进行.fade-enter-active设置动画的效果即transition属性，需要注意的是动画结束后样式将会移除，所以如果想要动画实现之后元素保持有某个样式，则需要transition标签里面的元素的样式表中进行设置，此情况是针对元需要通过改变元素的属性来显示元素，如定位top，left以及通过transform将显示的元素的位置改变从而让元素出现在当前的视图窗口中时，但是如果元素v-show为true之后元素已经在视图中央显示了，不需要位置的移动将元素移动到视图中，只是想要显示的时候显示有动画效果的，则直接将动画结束的属性设置在v-enter-active/v-leave-active中即可。也就是说动画的属性如果只是产生效果，不对元素的任何属性进行修改，也就是动画中的属性样式不需要永久添加到dom元素中，则直接按后者的方式定义，如果说动画的属性同时相对元素进行样式设计，属性样式需要被添加到dom元素上，则需要按照前者的方式。
&transition name="fold"&
&div class="shopcart-list" v-show="listShow"&
&div class="list-header"&
&h1 class="title"&购物车&/h1&
&span class="empty" @click="empty"&清空&/span&
&div class="list-content" ref="list"&
&li class="food border-1px" v-for="(food,index) in selectFoods" v-show="food.count&0"&
&span class="name"&{{selectName[index]}}&/span&
&div class="price"&
&span&￥{{food.price*food.count}}&/span&
&div class="cartcontrol-wrapper"&
&v-cartcontrol :food="food"&&/v-cartcontrol&
&/transition&
.fold-enter-active,.fold-leave-active
transition:all 0.5s
.fold-enter,.fold-leave
transform :translate3d(0,0,0)
.shopcart-list
position:absolute
transform:translate3d(0,-100%,0)//动画结束后的效果需要在此处进行设置，设置在.fold-enter-active中，元素动画结束后该样式属性会被移除掉，将会看不到想要的效果
top: 100%//元素即使显示也不再视图窗口中，通过transform实现显示
z-index:-1
width:100%
2、利用animation或者是动画库实现动画效果
&div id="example-2"&
&button @click="show = !show"&Toggle show&/button&
&transition name="bounce"&
&p v-if="show"&Look at me!&/p&
&/transition&
el: '#example-2',
show: true
.bounce-enter-active {
animation: bounce-in 0.5
.bounce-leave-active {
animation: bounce-out 0.5
@keyframes bounce-in {
transform: scale(0);
transform: scale(1.5);
transform: scale(1);
@keyframes bounce-out {
transform: scale(1);
transform: scale(1.5);
transform: scale(0);
3、自定义过度类名
enter-class
enter-active-class
leave-class
leave-active-class
&他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如&&结合使用十分有用。
&link&href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css"&
&div&id="example-3"&
&&&button&@click="show = !show"&
&&&&Toggle render
&&&/button&
&&&transition
&&&&name="custom-classes-transition"
&&&&enter-active-class="animated tada"
&&&&leave-active-class="animated bounceOutRight"
&&&&&p&v-if="show"&hello&/p&
&&&/transition&
el: '#example-3',
show: true
可以在样式中同时使用transition和animation
4、利用JavaScript钩子函数实现过渡效果
&transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
&!-- ... --&
&/transition&
methods: {
// --------
// --------
beforeEnter: function (el) {
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
enter: function (el, done) {
afterEnter: function (el) {
enterCancelled: function (el) {
// --------
// --------
beforeLeave: function (el) {
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
leave: function (el, done) {
afterLeave: function (el) {
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
在使用钩子函数实现动画的时候注意dom的异步刷新，需要结合this.$nextTick()，同时在leave和enter中设置样式前最好迫使dom进行回流（reflow）使dom重新渲染，如获取元素的offsetHeight等，然后在this.$nextTick（）中设置新的样式，不然又可能实现不了动画的效果
阅读(...) 评论()vue2.0 + bootstrapTable 动态添加元素和绑定点击事件，事件无效
[问题点数：20分]
vue2.0 + bootstrapTable 动态添加元素和绑定点击事件，事件无效
[问题点数：20分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|通过 Vue.js 的过渡系统，你可以轻松的为 DOM 节点被插入/移除的过程添加过渡动画效果。Vue 将会在适当的时机添加/移除 CSS 类名来触发 CSS3 过渡/动画效果，你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作。
以 v-transition="my-transition" 这个指令为例，当带有这个指令的 DOM 节点被插入或移除时，Vue 将会：
用 my-transition 这个 ID 去查找是否有注册过的 JavaScript 钩子对象。这个对象可以是由 Vue.transition(id, hooks) 全局注册，或是通过 transitions 选项定义在当前的组件内部。如果找到此对象，则会在过渡动画不同的阶段调用相应的钩子。
自动探测目标元素是否应用了 CSS 过渡效果或者动画效果，并在适当的时机添加/移除 CSS 类名。
如果没有提供 JavaScript 钩子函数，也没有检测到相应的 CSS 过渡/动画效果，DOM 的插入/移除会在下一帧立即执行。
所有的 Vue.js 过渡效果只有在该 DOM 操作是通过 Vue.js 触发时才会生效。触发的方式可以是通过内置指令，比如 v-if，或是通过 Vue 实例的方法，比如 vm.$appendTo()。
CSS 过渡效果
一个典型的 CSS 过渡效果定义如下：
&div v-if="show" v-transition="expand"&hello&/div&
你还需要定义 .expand-transition， .expand-enter 和.expand-leave 三个 CSS 类：
.expand-transition {
transition: all .3
height: 30
padding: 10
background-color: #
.expand-enter, .expand-leave {
height: 0;
padding: 0 10
opacity: 0;
同时，你也可以提供 JavaScript 钩子：
Vue.transition('expand', {
beforeEnter: function (el) {
el.textContent = 'beforeEnter'
enter: function (el) {
el.textContent = 'enter'
afterEnter: function (el) {
el.textContent = 'afterEnter'
enterCancelled: function (el) {
// handle cancellation
beforeLeave: function (el) {
el.textContent = 'beforeLeave'
leave: function (el) {
el.textContent = 'leave'
afterLeave: function (el) {
el.textContent = 'afterLeave'
leaveCancelled: function (el) {
// handle cancellation
这里使用的 CSS 类名由 v-transition 指令的值所决定。以 v-transition="fade" 为例，CSS 类 .fade-transition 将会一直存在，而 .fade-enter 和 .fade-leave 将会在合适的时机自动被添加或移除。当 v-transition 指令没有提供值的时候，所使用的 CSS 类名将会是默认的 .v-transition， .v-enter 和 .v-leave。
当 show 属性变化时，Vue 会依据其当前的值来插入/移除 &div& 元素，并在合适的时机添加/移除对应的 CSS 类，具体如下：
当 show 变为 false 时，Vue 将会：
调用 beforeLeave 钩子；
在元素上应用 CSS 类 .v-leave 来触发过渡效果；
调用 leave 钩子；
等待过渡效果执行完毕； (监听 transitionend 事件)
从 DOM 中移除元素并且移除 CSS 类 .v-leave。
调用 afterLeave 钩子。
当 show 为 true 时，Vue 将会：
调用 beforeEnter 钩子；
在元素上应用 CSS 类 .v-enter；
将元素插入 DOM；
调用 enter 钩子；
应用 .v-enter 类, 然后强制 CSS 布局以保证 .v-enter 生效；最后移除 .v-enter 来触发元素过渡到原本的状态。
等待过渡效果执行完毕；
调用 afterEnter 钩子。
此外，如果一个正在执行进入的过渡效果的元素在过渡还未完成之前就被移除，则 enterCancelled 钩子将会被执行。这个钩子可以用于清理工作，比如移除在 enter 时创建的计时器。对于正在离开过渡中又被重新插入的元素同理。
上述所有的钩子函数执行时，其 this 都指向相应的 Vue 实例。如果一个元素本身是一个 Vue 实例的根节点，则此实例将被应用为 this；否则 this 指向该过渡指令所属的实例。
最后，enter 与 leave 钩子函数可以接受可选的第二个参数：一个回调函数。当你的函数签名中含有第二个参数时，即表示你期望使用此回调来显式地完成整个过渡过程，而不是依赖 Vue 去自动检测 CSS 过渡的 transitionend 事件。比如：
enter: function (el) {
// 无第二个参数
// 过渡效果的结束由 CSS 过渡结束事件来决定
enter: function (el, done) {
// 有第二个参数
// 过渡效果结束必须由手动调用 `done` 来决定
当多个元素同时执行过渡效果时，Vue.js 会进行批量处理以保证只触发一次强制布局。
CSS 动画通过与 CSS 过渡效果一样的方式进行调用，区别就是动画中 .v-enter 类并不会在节点插入 DOM 后马上移除，而是在 animationend 事件触发时移除。
示例： (省略了兼容性前缀)
&span v-show="show" v-transition="bounce"&Look at me!&/span&
.bounce-enter {
animation: bounce-in .5s;
.bounce-leave {
animation: bounce-out .5s;
@keyframes bounce-in {
transform: scale(0);
transform: scale(1.5);
transform: scale(1);
@keyframes bounce-out {
transform: scale(1);
transform: scale(1.5);
transform: scale(0);
纯 JavaScript 过渡效果
你也可以只使用 JavaScript 钩子，不定义任何 CSS 过渡规则。当只使用 JavaScript 钩子时，enter 和 leave 钩子必须使用 done 回调，否则它们将会被同步调用，过渡将立即结束。下面的示例中我们使用 jQuery 来注册一个自定义的 JavaScript 过渡效果：
Vue.transition('fade', {
enter: function (el, done) {
// 此时元素已被插入 DOM
// 动画完成时调用 done 回调
.css('opacity', 0)
.animate({ opacity: 1 }, 1000, done)
enterCancelled: function (el) {
$(el).stop()
leave: function (el, done) {
// 与 enter 钩子同理
$(el).animate({ opacity: 0 }, 1000, done)
leaveCancelled: function (el) {
$(el).stop()
定义此过渡之后，你就可以通过给 v-transition 指定对应的 ID 来调用它：
&p v-transition="fade"&&/p&
如果一个只使用 JavaScript 过渡效果的元素恰巧也受到其它 CSS 过渡/动画规则的影响，这可能会对 Vue 的 CSS 过渡检测机制产生干扰。碰到这样的状况时，你可以通过给你的钩子对象添加 css: false 来禁止 CSS 检测。
渐进过渡效果
当同时使用 v-transition 和 v-repeat 时，我们可以为列表元素添加渐进的过渡效果，你只需要为你的过渡元素加上 stagger， enter-stagger 或者 leave-stagger 特性（以毫秒为单位）：
&div v-repeat="list" v-transition stagger="100"&&/div&
或者你也可以提供 stagger， enterStagger 或 eaveStagger 钩子来进行更细粒度的控制：
Vue.transition('stagger', {
stagger: function (index) {
// 为每个过渡元素增加 50ms 的延迟,
// 但是最大延迟为 300ms
return Math.min(300, index * 50)
下一节：。帖子41&实力值0 &资源币427 &推广值0 &
请问怎么解决vue动画闪烁的问题啊？
请问怎么解决vue动画闪烁的问题啊？
头像被屏蔽
帖子178437&实力值23 &资源币536135 &推广值0 &
回复 1# 的帖子
提示: 作者被禁止或删除 内容自动屏蔽
帖子970&实力值31 &资源币2871 &推广值0 &
以后重复问的问题采取降分制度。
－－－－－－想要自杀，请做设计－－－－－
http://www.cguse.com/?282
QQE的设计世界
帖子22&实力值0 &资源币0 &推广值0 &
谁知道,哪能这样
那么多问题谁知道有没有问过
帖子36&实力值0 &资源币26 &推广值0 &
这个问题到目前为止都没有解决。希望哪位大侠挺身而出。
帖子102&实力值5 &资源币525 &推广值0 &
关于vue的闪烁……其实确实很难解决，它渲染引擎决定的。个人认为有两种解决方案：1.参数开高，有时候选择ultra级别也会有闪烁& & 2.根据画面内容来，如果大部分是树木，中远景的话可以吧树的凹凸去掉，可以减低一些闪烁可能性。
闪烁某些原因是由于有些物体显示小于一个像素，而且vue又是一个渲染巨量物体的软件，再加上真实的光效等等结合在一起都会造成闪烁。所以动画……建议用渲染集群开高渲染参数，配合一些小技巧，只能说是降低闪烁。还有就是后期要处理一下，比如运动模糊。但是绝对不建议运动模糊和景深都在vue里面直接渲染出来，因为这两种都是以插值计算，要细分很高才会减少噪点，所以如果开启参数不高的话，又会产生很多噪点更加闪烁了。
以上是我经验总结，不一定完全正确。希望大家多讨论。
帖子35&实力值0 &资源币2 &推广值0 &
重复问同一个问题有意识吗!?
syjz_syf 发表于
& &回复这么一句话，不如说说怎么解决这个问题。
& &显然他问这个问题的时候，并不知道论坛里有相同的问题。
& &我想大家都认真对待的话，对论坛 对大家都是非常好的。
头像被屏蔽
帖子178437&实力值23 &资源币536135 &推广值0 &
提示: 作者被禁止或删除 内容自动屏蔽
[通过 QQ、MSN 分享给朋友]}