当前位置：首页 > VUE

使用Vue实现洗牌动画

2026-02-21 05:05:30VUE

实现洗牌动画的基本思路

洗牌动画的核心是通过随机打乱元素顺序并配合过渡效果实现视觉上的洗牌过程。Vue的列表过渡（<transition-group>）和动态数据绑定非常适合此类需求。

使用Vue TransitionGroup实现

准备数据与模板结构

<template>
  <div>
    <button @click="shuffle">洗牌</button>
    <transition-group name="shuffle" tag="div" class="card-container">
      <div v-for="card in cards" :key="card.id" class="card">
        {{ card.value }}
      </div>
    </transition-group>
  </div>
</template>

初始化卡片数据

data() {
  return {
    cards: Array.from({ length: 10 }, (_, i) => ({
      id: i,
      value: i + 1
    }))
  }
}

实现洗牌逻辑

methods: {
  shuffle() {
    this.cards = [...this.cards]
      .sort(() => Math.random() - 0.5)
      .map((card, index) => ({
        ...card,
        id: index // 强制更新key触发动画
      }))
  }
}

添加过渡样式

.shuffle-move {
  transition: transform 0.8s ease;
}
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.card {
  width: 60px;
  height: 80px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

进阶实现：3D翻转效果

修改卡片样式实现3D效果

.card {
  transition: all 0.6s;
  transform-style: preserve-3d;
}
.shuffle-enter-active, .shuffle-leave-active {
  transition: all 0.6s;
}
.shuffle-enter, .shuffle-leave-to {
  opacity: 0;
  transform: rotateY(180deg);
}

调整洗牌方法增加延迟

async shuffle() {
  // 先让所有卡片翻转
  this.cards = this.cards.map(card => ({
    ...card,
    isFlipped: true
  }))

  await new Promise(resolve => setTimeout(resolve, 300))

  // 打乱顺序
  this.cards = [...this.cards]
    .sort(() => Math.random() - 0.5)
    .map((card, index) => ({
      ...card,
      id: index,
      isFlipped: false
    }))
}

性能优化建议

使用FLIP动画技术（First-Last-Invert-Play）优化大规模列表动画：

记录元素初始位置（First）
执行DOM操作后获取最终位置（Last）
计算差异并应用transform反转（Invert）
播放过渡动画（Play）

// 示例FLIP实现
function flipAnimation(el) {
  const first = el.getBoundingClientRect()

  // 执行DOM变化后...
  const last = el.getBoundingClientRect()

  const dx = first.left - last.left
  const dy = first.top - last.top

  el.style.transform = `translate(${dx}px, ${dy}px)`
  el.style.transition = 'transform 0s'

  requestAnimationFrame(() => {
    el.style.transform = ''
    el.style.transition = 'transform 0.5s'
  })
}