当前位置：首页 > VUE

vue交错实现代码

2026-02-23 01:07:07VUE

在Vue中实现交错动画效果（Staggered Animation）可以通过多种方式实现，以下是一些常见的方法和代码示例：

使用CSS Transition + Vue的列表渲染

通过结合Vue的v-for和CSS过渡类，可以为列表元素添加交错动画效果：

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="item.id"
      :style="{ 'transition-delay': `${index * 0.1}s` }"
      class="fade-item"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  }
}
</script>

<style>
.fade-item {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.fade-item.show {
  opacity: 1;
  transform: translateY(0);
}
</style>

使用Vue TransitionGroup组件

Vue的<transition-group>组件配合自定义过渡类可以实现更复杂的交错动画：

<template>
  <transition-group 
    name="staggered-fade" 
    tag="div"
    @before-enter="beforeEnter"
    @enter="enter"
  >
    <div v-for="(item, index) in items" :key="item.id" class="item">
      {{ item.text }}
    </div>
  </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 * 100
      setTimeout(() => {
        Velocity(
          el,
          { opacity: 1, translateY: 0 },
          { complete: done }
        )
      }, delay)
    }
  }
}
</script>

使用GSAP动画库

GSAP提供了强大的时间轴功能，可以轻松创建交错动画：

<template>
  <div ref="container">
    <div 
      v-for="(item, index) in items" 
      :key="item.id" 
      :data-index="index"
      class="item"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ]
    }
  },
  mounted() {
    this.animateItems()
  },
  methods: {
    animateItems() {
      const items = this.$refs.container.querySelectorAll('.item')
      gsap.from(items, {
        opacity: 0,
        y: 50,
        duration: 0.5,
        stagger: 0.1
      })
    }
  }
}
</script>

使用Vue的自定义指令

可以创建一个自定义指令来实现交错动画效果：

// main.js
Vue.directive('stagger', {
  inserted(el, binding) {
    const index = binding.value
    gsap.to(el, {
      opacity: 1,
      y: 0,
      duration: 0.5,
      delay: index * 0.1
    })
  }
})

<template>
  <div>
    <div 
      v-for="(item, index) in items" 
      :key="item.id"
      v-stagger="index"
      style="opacity:0; transform:translateY(20px)"
    >
      {{ item.text }}
    </div>
  </div>
</template>

这些方法可以根据具体需求选择使用，CSS Transition适合简单场景，GSAP适合复杂动画，自定义指令提供了更高的复用性。

vue交错实现代码