代码
<div>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false">
<p class="animate-p" v-show="show">i am show</p>
</transition>
</div>
const $ = window.$
export default {
methods: {
beforeEnter (el) {
$(el).css({
left: 0,
opacity: 0
})
},
enter (el, done) {
$(el).animate({
left: '500px',
opacity: 1
}, {
duration: 1500,
complete: done
})
},
leave (el, done) {
$(el).animate({
left: '1000px',
opacity: 0
}, {
duration: 1500,
complete: done
})
}
}
}
注意：
- 需要绑定css为false，可以避免过渡过程中css的影响
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false">
<p></p>
</transition>
- 方法中是有参数的，el就表示在过渡标签内的dom元素;enter和leave方法里还有个额外参数done，这个是在调完方法之后再调用done方法
- 建议在引入jQuery库时，在index.html中引入，这样就不会通过打包和处理，只会作为一个入口的页面进行加东西
