Vue过渡效果之JS过渡
Posted 小火柴的蓝色理想
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue过渡效果之JS过渡相关的知识,希望对你有一定的参考价值。
前面的话
与CSS过渡不同,JS过渡主要通过事件进行触发。本文将详细介绍Vue过渡效果之JS过渡
事件钩子
JS过渡主要通过事件监听事件钩子来触发过渡,共包括如下的事件钩子
<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>
下面各个方法中,函数中的参数el表示要过渡的元素,可以设置不同情况下,el的位置、颜色等来控制其动画的改变
// ...
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) {
// ...
}
}
上面方法中,有两个方法比较特殊,是enter()和leave()方法,它们接受了第二个参数done。当进入完毕或离开完毕后,会调用done()方法来进行接下来的操作
[注意]对于仅使用JS过渡的元素添加 v-bind:css="false"
,Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响
【简单事例】
下面是一个JS过渡的简单事例
<div id="demo"> <button @click="show = !show">Toggle</button> <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" :css="false"> <p v-if="show">Demo</p> </transition> </div>
<script> new Vue({ el: \'#demo\', data: { show: false }, methods: { beforeEnter: function (el) { el.style.opacity = 0 el.style.transformOrigin = \'left\' }, enter: function (el, done) { Velocity(el, { opacity: 1, fontSize: \'1.4em\' }, { duration: 300 }) Velocity(el, { fontSize: \'1em\' }, { complete: done }) }, leave: function (el, done) { Velocity(el, { translateX: \'15px\', rotateZ: \'50deg\' }, { duration: 600 }) Velocity(el, { rotateZ: \'100deg\' }, { loop: 2 }) Velocity(el, {rotateZ: \'45deg\',translateY: \'30px\',translateX: \'30px\',opacity: 0}, {complete: done }) } } }) </script>
初始渲染过渡
可以通过 appear
特性设置节点的在初始渲染的过渡,自定义 javascript 钩子
<transition appear v-on:before-appear="customBeforeAppearHook" v-on:appear="customAppearHook" v-on:after-appear="customAfterAppearHook" v-on:appear-cancelled="customAppearCancelledHook" > <!-- ... --> </transition>
下面是一个例子
<div id="demo"> <button @click="reset">还原</button> <transition appear :appear="customAppearHook"> <p>小火柴的蓝色理想</p> </transition> </div>
<script> new Vue({ el: \'#demo\', methods:{ reset(){ history.go(); }, customAppearHook(el, done) { Velocity(el, {backgroundColor:"#ddd",translateX:200}); Velocity(el,"reverse",{complete:done}) }, } }) </script>
以上是关于Vue过渡效果之JS过渡的主要内容,如果未能解决你的问题,请参考以下文章