详解Vue中过度动画效果应用

网友投稿 329 2023-05-12


详解Vue中过度动画效果应用

一、实现动画过渡效果的几种方式

实现动画必须要将要进行动画的元素利用标签进行包裹

1、利用css样式实现过渡效果

1.v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。

2.v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效,在 transition/animation 完成之后移除。

3.v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。

4.v-leave-active: 定义离开过渡的结束状态。在离http://开过渡被触发时生效,在 transition/animation 完成之后

通过name的名称进行重命名,在样式文件中进行.fade-enter-active设置动画的效果即transition属性,需要注意的是动画结束后样式将会移除,所以如果想要动画实现之后元素保持有某个样式,则需要transition标签里面的元素的样式表中进行设置,此情况是针对元需要通过改变元素的属性来显示元素,如定位top,left以及通过transform将显示的元素的位置改变从而让元素出现在当前的视图窗口中时,但是如果元素v-show为true之后元素已经在视图中央显示了,不需要位置的移动将元素移动到视图中,只是想要显示的时候显示有动画效果的,则直接将动画结束的属SXvrmBGhL性设置在v-enter-active/v-leave-active中即可。也就是说动画的属性如果只是产生效果,不对元素的任何属性进行修改,也就是动画中的属性样式不需要永久添加到dom元素中,则直接按后者的方式定义,如果说动画的属性同时相对元素进行样式设计,属性样式需要被添加到dom元素上,则需要按照前者的方式。

清空

{{selectName[index]}}

¥{{food.price*food.count}}

.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或者是动画库实现动画效果

Look at me!

new vue({

el: '#example-2',

data: {

show: true

}

})

.bounce-enter-active {

animation: bounce-in 0.5s linear;

}

.bounce-leave-active {

animation: bounce-out 0.5s linear;

}

@keyframes bounce-in {

0% {

transform: scale(0);

}

50% {

transform: scale(1.5);

}

100% {

transform: scale(1);

}

}

@keyframes bounce-out {

0% {

transform: scale(1);

}

50% {

transform: scale(1.5);

}

100% {

transform: scale(0);

}

}

3、自定义过度类名

enter-class

enter-active-class

leave-class

leave-active-class

他们的优先级高于普通的类名,这对于 Vue 的过渡系统和其他第三方 CSS 动画库,如 Animate.css 结合使用十分有用。

Toggle render

name="custom-classes-transition"

enter-active-class="animated tada"

leave-active-class="animated bounceOutRight"

>

hello

name="custom-classes-transition"

enter-active-class="animated tada"

leave-active-class="animated bounceOutRight"

>

hello

new Vue({

el: '#example-3',

data: {

show: true

}

})

可以在样式中同时使用transition和animation

4、利用javascript钩子函数实现过渡效果

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"

>

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"

>

methods: {

// --------

// 进入中

// --------

beforeEnter: function (el) {

// ...

},

// 此回调函数是可选项的设置

// 与 CSS 结合时使用

enter: function (el, done) {

// ...

done()

},

afterEnter: function (el) {

// ...

},

enterCancelled: function (el) {

// ...

},

// --------

// 离开时

// --------

beforeLeave: function (el) {

// ...

},

// 此回调函数是可选项的设置

// 与 CSS 结合时使用

leave: function (el, done) {

// ...

done()

},

afterLeave: function (el) {

// ...

},

// leaveCancelled 只用于 v-show 中

leaveCancelled: function (el) {

// ...

}

}

在使用钩子函数实现动画的时候注意dom的异步刷新,需要结合this.$nextTick(),同时在leave和enter中设置样式前最好迫使dom进行回流(reflow)使dom重新渲染,如获取元素的offsetHeight等,然后在this.$nextTick()中设置新的样式,不然又可能实现不了动画的效果


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Java中实现线程的三种方式及对比_动力节点Java学院整理
下一篇:Java线程休眠_动力节点Java学院整理
相关文章

 发表评论

暂时没有评论,来抢沙发吧~