当前位置：首页 > VUE

vue交错实现代码

2026-01-22 10:06:51VUE

Vue 交错动画实现方法

使用 Vue 的 <transition-group> 组件结合 CSS 过渡可以实现交错动画效果。以下是一个典型实现方式：

<template>
  <transition-group 
    name="staggered-fade" 
    tag="ul"
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
  >
    <li v-for="(item, index) in items" :key="item.id" :data-index="index">
      {{ item.text }}
    </li>
  </transition-group>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
      el.style.transform = 'translateY(20px)'
    },
    enter(el, done) {
      const delay = el.dataset.index * 150
      setTimeout(() => {
        Velocity(
          el,
          { opacity: 1, translateY: 0 },
          { complete: done }
        )
      }, delay)
    },
    leave(el, done) {
      const delay = el.dataset.index * 150
      setTimeout(() => {
        Velocity(
          el,
          { opacity: 0, translateY: '20px' },
          { complete: done }
        )
      }, delay)
    }
  }
}
</script>

使用 CSS 实现交错动画

纯 CSS 方案可以通过自定义属性实现延迟控制：

.staggered-fade-move {
  transition: transform 0.5s;
}

.staggered-fade-enter-active,
.staggered-fade-leave-active {
  transition: all 0.5s;
}

.staggered-fade-enter,
.staggered-fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.staggered-fade-enter-active {
  transition-delay: calc(var(--stagger-index) * 0.1s);
}

基于 GSAP 的高级实现

对于复杂动画场景，可以使用 GSAP 时间线：

import { gsap } from 'gsap'

methods: {
  animateItems() {
    const items = this.$el.querySelectorAll('li')
    gsap.from(items, {
      duration: 0.5,
      opacity: 0,
      y: 20,
      stagger: 0.1,
      ease: 'power2.out'
    })
  }
}

动态调整延迟时间

通过计算属性动态控制延迟时间：

computed: {
  animatedItems() {
    return this.items.map((item, index) => ({
      ...item,
      style: {
        '--delay': `${index * 0.1}s`
      }
    }))
  }
}

以上方法均可实现 Vue 中的交错动画效果，开发者可根据项目需求选择合适方案。CSS 方案适合简单场景，GSAP 适合复杂动画，而 Velocity.js 提供了良好的性能平衡。

vue交错实现代码