vue实现链式运动

实现链式运动的思路

链式运动指的是多个动画按顺序依次执行，通常需要在前一个动画完成后触发下一个动画。Vue中可以通过结合CSS过渡、JavaScript动画库或自定义逻辑实现。

使用Vue过渡 + CSS实现

通过Vue的<transition>组件和CSS过渡类，结合@after-enter事件实现链式触发：

<template>
  <div>
    <transition @after-enter="handleFirstComplete">
      <div v-if="showFirst" class="box">第一个元素</div>
    </transition>

    <transition @after-enter="handleSecondComplete">
      <div v-if="showSecond" class="box">第二个元素</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showFirst: true,
      showSecond: false
    }
  },
  methods: {
    handleFirstComplete() {
      this.showSecond = true
    },
    handleSecondComplete() {
      console.log('所有动画完成')
    }
  }
}
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background: red;
  transition: all 1s;
}

.v-enter-active, .v-leave-active {
  transition: opacity 1s, transform 1s;
}
.v-enter, .v-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>

使用JavaScript动画库（GSAP）

GSAP的Timeline功能天然支持链式动画：

<template>
  <div>
    <div ref="box1" class="box">Box 1</div>
    <div ref="box2" class="box">Box 2</div>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  mounted() {
    const tl = gsap.timeline()
    tl.to(this.$refs.box1, { x: 100, duration: 1 })
      .to(this.$refs.box2, { y: 50, duration: 0.5 })
  }
}
</script>

自定义Promise实现链式

通过Promise封装动画，使用async/await实现顺序执行：

<template>
  <div>
    <div ref="box" class="box" :style="{ left: position + 'px' }"></div>
    <button @click="startChain">开始动画</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      position: 0
    }
  },
  methods: {
    animate(distance, duration) {
      return new Promise(resolve => {
        const start = Date.now()
        const animateFrame = () => {
          const elapsed = Date.now() - start
          const progress = Math.min(elapsed / duration, 1)
          this.position = distance * progress
          if (progress < 1) {
            requestAnimationFrame(animateFrame)
          } else {
            resolve()
          }
        }
        animateFrame()
      })
    },
    async startChain() {
      await this.animate(100, 1000)
      await this.animate(200, 500)
      await this.animate(50, 800)
    }
  }
}
</script>

使用Vue的watch实现

通过观察数据变化触发连续动画：

data() {
  return {
    step: 1,
    box1Style: {},
    box2Style: {}
  }
},
watch: {
  step(newVal) {
    if (newVal === 1) {
      this.animateBox1()
    } else if (newVal === 2) {
      this.animateBox2()
    }
  }
},
methods: {
  animateBox1() {
    // 动画逻辑
    setTimeout(() => {
      this.step = 2
    }, 1000)
  },
  animateBox2() {
    // 动画逻辑
  }
}

每种方法适用于不同场景，CSS过渡适合简单效果，GSAP适合复杂动画序列，Promise方式提供更灵活的控制，watch方式适合与数据驱动紧密结合的场景。