vue实现链式运动
Vue 实现链式运动的方法
链式运动指的是多个动画按顺序依次执行的效果。在 Vue 中可以通过组合使用过渡动画、生命周期钩子和异步方法实现。
使用 Vue Transition 和钩子函数
通过 Vue 的 <transition> 组件配合 JavaScript 钩子实现动画顺序控制：
<template>
<div>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<div v-if="show" class="box"></div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
},
methods: {
beforeEnter(el) {
el.style.opacity = 0
el.style.transform = 'translateX(-100px)'
},
enter(el, done) {
Velocity(el,
{ opacity: 1, translateX: '0px' },
{ duration: 500, complete: done }
)
},
afterEnter() {
// 第一个动画完成后触发第二个动画
this.$nextTick(() => {
// 触发下一个元素动画
})
}
},
mounted() {
this.show = true
}
}
</script>使用 async/await 控制动画顺序
结合异步编程实现精确的动画时序控制：
methods: {
async startAnimation() {
await this.animateElement('#el1', {x: 100})
await this.animateElement('#el2', {y: 200})
await this.animateElement('#el3', {scale: 1.5})
},
animateElement(selector, properties) {
return new Promise(resolve => {
Velocity(document.querySelector(selector), properties, {
duration: 500,
complete: resolve
})
})
}
}使用第三方动画库
GSAP 等专业动画库提供更强大的链式动画控制能力：
import { gsap } from 'gsap'
methods: {
runChainAnimation() {
gsap.timeline()
.to('.box1', { x: 100, duration: 1 })
.to('.box2', { y: 50, duration: 0.5 })
.to('.box3', { rotation: 360, duration: 2 })
}
}组件间动画链式调用
通过事件总线或 Vuex 管理跨组件动画顺序：
// 组件A
this.$emit('animation-complete')
// 组件B
eventBus.$on('animation-complete', () => {
this.startNextAnimation()
})实现要点：
- 利用动画回调或 Promise 确保执行顺序
- 合理使用 Vue 响应式数据控制动画触发时机
- 复杂场景考虑专业动画库的时间线功能
- 组件间通信保持动画链的完整性
