三亩地 三亩地SAN MU DI · CODE DIARY
交流投稿
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天，欢迎挑你感兴趣的翻一翻。

首页/学习日记/日记详情

Vue.js + CSS3实现移动端层叠卡片滑动切换效果

发布时间：2026/8/13 5:15:16 三亩地 编程学习日记
Vue.js + CSS3实现移动端层叠卡片滑动切换效果

1. 项目概述与核心价值

最近在做一个社区类产品的个人中心页面，需要展示用户的成就徽章或者收藏的卡片。传统的列表展示太枯燥，而直接堆叠又显得杂乱。当时就想，能不能做成那种像实体卡片一样，可以一张张滑动切换，并且有层叠视觉效果的交互？这其实就是我们常说的“层叠卡片滑动切换”效果。在移动端应用里，这种交互非常常见，比如一些社交App的个人相册浏览、电商App的商品卡片推荐，它能在有限的屏幕空间内，优雅地承载多张卡片信息，通过手势操作带来流畅的触觉反馈，用户体验直接拉满。

这个效果听起来炫酷，但拆解开来，核心就是Vue.js的响应式数据驱动和CSS3的Transform动画的完美结合。Vue负责管理卡片的状态（哪张在前，哪张在后，是否被移除），而CSS则负责将这些状态变化，以平滑过渡动画的形式呈现出来。网上虽然有不少现成的轮子，但要么过于臃肿，要么定制性不强。自己动手实现一遍，不仅能彻底搞懂其原理，更能根据业务需求灵活调整，比如卡片的层叠数量、滑动阈值、回弹效果等。对于前端开发者而言，这是一个绝佳的练手项目，能深刻理解Vue的组件化、计算属性、过渡模式与CSS动画的协同工作流。

2. 整体设计与核心思路拆解

2.1 效果原型与交互逻辑分析

在动手写代码之前，我们先在脑子里把整个交互流程过一遍。想象一叠扑克牌平铺在桌面上，你用手指按住最上面那张，向右滑动。随着你的拖动，这张牌会跟着你的手指移动，而它下面的几张牌，也会根据距离的远近，发生不同程度的位移和缩放，形成一种透视的层叠感。当你松手时，会判定你的滑动距离和速度：如果超过了某个阈值，最上面这张牌就会“飞走”（移除或切换到下一组），然后第二张牌会通过动画补位成为新的顶部卡片；如果没超过阈值，所有卡片会像弹簧一样“咻”地一下回到初始位置。

这里有几个关键状态需要Vue来管理：

  1. 卡片列表数据：一个数组，存储所有卡片的唯一标识和内容。
  2. 当前激活的卡片索引：一个数字，指向数组中的某一张卡片，代表当前位于最顶部的卡片。
  3. 拖拽状态：包括是否正在拖拽、拖拽的起始点、当前的偏移量等。
  4. 动画状态：卡片是处于静止、拖拽中、飞出中还是回弹中。

我们的目标就是：用Vue的data和computed来定义这些状态，用methods来响应触摸事件以改变状态，最后用watch或计算属性驱动的CSS样式（特别是transform）来将状态变化渲染为视觉动画。

2.2 技术栈选型与方案对比

实现这个效果，有几种不同的技术路径：

方案一：纯CSS + 少量JS

  • 思路：利用CSS的transform和transition实现基础动画，用JS（或Vue）监听touch事件，动态修改元素的style。
  • 优点：性能好，动画流畅，代码相对简单直观。
  • 缺点：交互逻辑（如边界判断、速度计算、连续滑动）全部需要手动实现，复杂度较高。
  • 适用场景：追求极致性能或项目限制不能使用重型库时。

方案二：使用专用手势库（如hammer.js,@vueuse/gesture）

  • 思路：引入手势库来处理复杂的触摸、拖拽、滑动手势，Vue只负责数据绑定和视图更新。
  • 优点：手势识别准确、功能强大（支持旋转、缩放、多指等），能节省大量底层事件处理代码。
  • 缺点：增加包体积，需要学习第三方API。
  • 适用场景：项目中已有手势库，或需要复杂手势交互。

方案三：基于现有轮子（如vue-card-swipe组件库）

  • 思路：直接安装封装好的Vue组件，通过配置项启用层叠滑动效果。
  • 优点：开箱即用，开发速度最快。
  • 缺点：定制灵活性最低，可能遇到样式或交互与设计稿不符需要魔改的情况。

对于这个项目，我们的目标是深入理解原理，因此选择方案一，即“Vue.js + 原生事件 + CSS动画”的组合。这能让我们掌控每一个细节。我们会使用Vue 3的Composition API（<script setup>）来编写，其逻辑组织更清晰，也便于复用。

注意：在移动端，务必同时考虑touch事件和mouse事件，以保证在PC端用鼠标也能正常调试和交互。我们将使用@touchstart、@touchmove、@touchend和@mousedown、@mousemove、@mouseup这两套事件。

3. 核心细节解析与实操要点

3.1 卡片堆叠的CSS魔法：transform三件套

层叠效果的核心在于对非顶部卡片的样式处理。我们通过计算每张卡片的“层级序位”，应用不同的CSStransform属性。

假设我们有5张卡片，当前激活的是索引为activeIndex的卡片。对于任意一张索引为i的卡片，它的“序位”可以计算为order = i - activeIndex。order为0代表是顶部卡片，1代表下一张，以此类推。

.card { position: absolute; width: 80%; height: 60%; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease-out; /* 非拖拽时的过渡动画 */ will-change: transform; /* 提示浏览器优化，提升性能 */ }

然后，在Vue的模板或样式中，我们动态绑定transform：

<template> <div v-for="(card, index) in cards" :key="card.id" class="card" :style="getCardStyle(index)" > {{ card.content }} </div> </template> <script setup> import { computed } from 'vue'; const activeIndex = ref(0); const dragOffsetX = ref(0); // 顶部卡片拖拽的横向偏移 const getCardStyle = (index) => { const order = index - activeIndex.value; // 如果是正在被拖拽的顶部卡片 if (order === 0) { return { transform: `translateX(${dragOffsetX.value}px) rotate(${dragOffsetX.value * 0.1}deg)`, zIndex: 100, // 确保顶层 transition: dragOffsetX.value === 0 ? 'transform 0.3s ease-out' : 'none' // 拖拽时取消过渡 }; } // 对于后面的卡片 if (order > 0 && order <= 3) { // 只显示后面3张 const scale = 1 - order * 0.05; // 每张缩小5% const translateY = order * 15; // 每张向下偏移15px const translateX = -order * 2; // 微微向左偏移，营造立体感 return { transform: `translateX(${translateX}px) translateY(${translateY}px) scale(${scale})`, zIndex: 100 - order, // 层级递减 opacity: 1 - order * 0.2 // 透明度递减 }; } // 更后面的卡片隐藏 return { display: 'none' }; }; </script>

关键点解析：

  1. position: absolute：所有卡片绝对定位，重叠在一起，通过transform和z-index控制视觉层次。
  2. transform链式操作：translateX、translateY、scale、rotate可以同时应用，顺序会影响最终效果。这里我们先平移再缩放，符合视觉逻辑。
  3. transition控制：只有非拖拽状态下的样式变化（如松手回弹、切换卡片）才需要过渡动画。在拖拽过程中（dragOffsetX变化时），应设置transition: none以保证手指跟手。
  4. will-change: transform：这是一个性能优化提示，告诉浏览器该元素可能会经常变化，让浏览器提前做好优化准备。但不宜滥用，仅用于动画元素。

3.2 Vue响应式数据驱动动画

Vue在此处的核心作用是作为“状态机”。我们定义的所有响应式数据（ref或reactive）都是这个状态机的输入，而最终的UI样式是输出。

// 状态定义 const state = reactive({ cards: [...], // 卡片数据数组 activeIndex: 0, // 当前顶部卡片索引 isDragging: false, startX: 0, currentX: 0, dragOffsetX: 0, // 计算出的偏移量 throwVelocity: 0 // 抛掷速度，用于计算惯性滑动 }); // 计算属性：当前拖拽的百分比，用于判断是否满足切换条件 const dragRatio = computed(() => { const width = 300; // 卡片参考宽度 return state.dragOffsetX / width; });

当用户触发touchstart时，我们记录起始点，并设置isDragging = true。 在touchmove事件中，我们计算currentX，并更新dragOffsetX = currentX - startX。这个dragOffsetX会实时反应到顶部卡片的transform: translateX(${dragOffsetX}px)上，从而实现视觉上的跟随。 在touchend事件中，我们根据最终的dragOffsetX和滑动速度throwVelocity，判断是应该切换到下一张（activeIndex++），还是复位（dragOffsetX = 0）。activeIndex的变化，会触发getCardStyle函数为所有卡片重新计算样式，由于我们为.card设置了transition，这个重新计算的过程就会以动画形式呈现。

这就是Vue响应式驱动动画的精髓：我们不用直接操作DOM样式，而是操作数据，让Vue的响应式系统自动帮我们更新视图，并结合CSS过渡实现动画。

4. 实操过程与核心环节实现

4.1 项目初始化与基础结构

首先，我们使用Vite快速搭建一个Vue 3项目。

npm create vue@latest vue-card-stack cd vue-card-stack npm install npm run dev

清理默认组件，创建我们的主组件CardStack.vue。

4.2 实现拖拽手势识别与状态管理

这是整个项目最核心的JS逻辑部分。我们需要在卡片容器上监听原生事件。

<template> <div class="card-stack-container" ref="containerRef"> <!-- 卡片列表 --> <div v-for="(card, index) in cardList" :key="card.id" class="card" :style="getCardStyle(index)" @touchstart.passive="startDrag($event, index)" @mousedown="startDrag($event, index)" > <div class="card-content"> <h3>{{ card.title }}</h3> <p>{{ card.description }}</p> </div> </div> </div> </template> <script setup> import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'; // 卡片数据 const initialCards = [ { id: 1, title: '卡片一', description: '这是第一张卡片的内容。' }, { id: 2, title: '卡片二', description: '滑动试试看，效果很流畅。' }, { id: 3, title: '卡片三', description: 'Vue驱动动画如此简单。' }, { id: 4, title: '卡片四', description: '层叠效果由CSS Transform实现。' }, { id: 5, title: '卡片五', description: '最后一张卡片了。' }, ]; const cardList = ref([...initialCards]); const containerRef = ref(null); // 拖拽状态 const dragState = reactive({ isDragging: false, activeCardIndex: 0, startX: 0, startY: 0, currentX: 0, offsetX: 0, startTime: 0, throwVelocity: 0, }); // 开始拖拽 const startDrag = (event, index) => { // 只有最顶部的卡片可以拖拽 if (index !== dragState.activeCardIndex) return; event.preventDefault(); dragState.isDragging = true; dragState.startX = getClientX(event); dragState.startY = getClientY(event); dragState.currentX = dragState.startX; dragState.startTime = Date.now(); dragState.offsetX = 0; dragState.throwVelocity = 0; // 绑定全局事件，防止拖拽过程中鼠标/手指移出元素外 window.addEventListener('touchmove', onDragMove, { passive: false }); window.addEventListener('touchend', onDragEnd); window.addEventListener('mousemove', onDragMove); window.addEventListener('mouseup', onDragEnd); }; // 拖拽移动 const onDragMove = (event) => { if (!dragState.isDragging) return; event.preventDefault(); dragState.currentX = getClientX(event); dragState.offsetX = dragState.currentX - dragState.startX; // 简单限制垂直方向拖动，避免误操作成上下滚动 const offsetY = getClientY(event) - dragState.startY; if (Math.abs(offsetY) > 10 && Math.abs(dragState.offsetX) < 10) { // 如果主要是垂直拖动，则取消本次拖拽 resetDragState(); } }; // 拖拽结束 const onDragEnd = () => { if (!dragState.isDragging) return; const dragTime = Date.now() - dragState.startTime; // 计算瞬时速度 (像素/毫秒) dragState.throwVelocity = dragTime > 0 ? dragState.offsetX / dragTime : 0; // 判断逻辑：基于偏移量比例和速度 const swipeThreshold = 0.3; // 偏移超过卡片宽度30% const velocityThreshold = 0.3; // 速度阈值 const cardWidth = containerRef.value ? containerRef.value.offsetWidth : 300; const ratio = dragState.offsetX / cardWidth; const absVelocity = Math.abs(dragState.throwVelocity); const shouldSwipe = Math.abs(ratio) > swipeThreshold || absVelocity > velocityThreshold; if (shouldSwipe) { // 执行切换：判断方向 if (dragState.offsetX > 0) { // 向右滑，通常可以定义为“喜欢”或执行其他操作，这里我们简单移除 removeTopCard(); } else { // 向左滑，切换到下一张 goToNextCard(); } } else { // 复位 resetCardPosition(); } cleanupDragEvents(); }; // 移除顶部卡片 const removeTopCard = () => { // 可以在这里触发一个“飞出”动画 cardList.value.splice(dragState.activeCardIndex, 1); // 如果删完了，可以重置或加载更多 if (cardList.value.length === 0) { cardList.value = [...initialCards]; dragState.activeCardIndex = 0; } else if (dragState.activeCardIndex >= cardList.value.length) { dragState.activeCardIndex = cardList.value.length - 1; } resetDragState(); }; // 切换到下一张 const goToNextCard = () => { if (dragState.activeCardIndex < cardList.value.length - 1) { dragState.activeCardIndex++; } else { // 如果是最后一张，可以循环回到第一张 dragState.activeCardIndex = 0; } resetDragState(); }; // 复位卡片位置 const resetCardPosition = () => { dragState.offsetX = 0; resetDragState(); }; // 重置拖拽状态 const resetDragState = () => { dragState.isDragging = false; dragState.offsetX = 0; dragState.throwVelocity = 0; }; // 清理事件监听 const cleanupDragEvents = () => { window.removeEventListener('touchmove', onDragMove); window.removeEventListener('touchend', onDragEnd); window.removeEventListener('mousemove', onDragMove); window.removeEventListener('mouseup', onDragEnd); }; // 辅助函数：获取客户端X坐标 const getClientX = (event) => { return event.type.includes('touch') ? event.touches[0].clientX : event.clientX; }; // 辅助函数：获取客户端Y坐标 const getClientY = (event) => { return event.type.includes('touch') ? event.touches[0].clientY : event.clientY; }; // 组件卸载时清理事件 onUnmounted(() => { cleanupDragEvents(); }); </script>

4.3 动态样式计算与动画衔接

现在，我们将拖拽状态与卡片样式绑定起来。

<script setup> // ... 之前的代码 ... // 计算卡片样式 const getCardStyle = (index) => { const order = index - dragState.activeCardIndex; const cardWidth = containerRef.value ? containerRef.value.offsetWidth * 0.8 : 240; // 假设卡片宽度为容器80% const maxOffset = cardWidth * 0.8; // 最大拖拽偏移限制 // 限制拖拽偏移量，防止拖太远 let currentOffsetX = dragState.offsetX; if (dragState.isDragging) { currentOffsetX = Math.max(Math.min(currentOffsetX, maxOffset), -maxOffset); } // 顶部卡片样式 if (order === 0) { const rotate = currentOffsetX * 0.1; // 旋转角度与偏移量成正比 return { transform: `translateX(${currentOffsetX}px) rotate(${rotate}deg)`, zIndex: 1000, transition: dragState.isDragging ? 'none' : 'transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)', // 回弹使用缓动函数 cursor: dragState.isDragging ? 'grabbing' : 'grab', }; } // 后续卡片样式（显示后面3张） if (order > 0 && order <= 3) { const scale = 1 - order * 0.05; const translateY = order * 18; const translateX = -order * 5 + (currentOffsetX * 0.1 * order); // 顶层拖动时，下层卡片也有轻微跟随 return { transform: `translateX(${translateX}px) translateY(${translateY}px) scale(${scale})`, zIndex: 1000 - order * 10, opacity: 1 - order * 0.15, transition: 'transform 0.3s ease-out, opacity 0.3s ease-out', }; } // 更后面的卡片不可见 return { display: 'none', }; }; </script> <style scoped> .card-stack-container { position: relative; width: 100%; height: 400px; margin: 0 auto; overflow: hidden; touch-action: pan-y; /* 允许垂直滚动，防止浏览器默认行为干扰 */ } .card { position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; background: linear-gradient(135deg, #ffffff, #f9f9f9); border-radius: 20px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px; box-sizing: border-box; user-select: none; backface-visibility: hidden; /* 防止动画闪烁 */ -webkit-font-smoothing: subpixel-antialiased; } .card-content { text-align: center; } </style>

关键实现解析：

  1. 事件监听：在卡片上同时监听touch和mouse事件，并通过.passive修饰符优化touchstart的滚动性能。事件处理函数中，我们通过getClientX和getClientY来统一获取坐标。
  2. 状态管理：dragState对象集中管理所有拖拽相关状态，逻辑清晰。isDragging是总开关，控制着样式中的transition属性。
  3. 边界与性能：
    • 通过window.addEventListener在拖拽开始时绑定全局事件，确保手指/鼠标移出卡片区域仍能跟踪，并在结束时清理，避免内存泄漏。
    • 在onDragMove中加入了简单的垂直拖动判断，防止与页面滚动冲突。
    • 使用will-change和backface-visibility等CSS属性优化动画性能。
  4. 切换判定：在onDragEnd中，综合了拖动比例和拖动速度两个因素来决定是否切换卡片，这使得交互更加自然。快速轻扫即使距离短也能触发切换，慢速拖动则需要更大的位移。
  5. 缓动函数：顶部卡片复位时，我们使用了cubic-bezier(0.175, 0.885, 0.32, 1.275)这个自定义贝塞尔曲线，它模拟了一种“过冲回弹”的弹性效果，比简单的ease-out更有活力。

5. 常见问题与排查技巧实录

在实际实现和调试过程中，我遇到了不少坑。这里总结一下，希望能帮你快速过关。

5.1 动画卡顿与闪烁问题

问题描述：在低端手机或模拟器上滑动卡片时，动画不跟手，有延迟或跳跃感。

排查与解决：

  1. 检查transition属性：确保在拖拽进行中（isDragging为true时），顶部卡片的transition被设置为none。如果拖拽时仍有transition，会导致样式更新滞后于手指移动，产生严重卡顿。
  2. 使用transform而非left/top：CSS的transform属性（尤其是translate）的动画性能远优于修改left、top等定位属性，因为前者可以由GPU加速。我们全程都应使用transform。
  3. 启用GPU加速：对于动画元素，可以添加transform: translateZ(0)或will-change: transform来提示浏览器启用GPU合成层，提升动画流畅度。但不宜滥用，仅用于动画元素。
  4. 简化复合动画：避免在同一帧内同时动画过多属性（如transform,opacity,box-shadow）。我们的例子中主要只动画了transform，是性能友好的。
  5. 防抖与节流：touchmove事件触发频率极高，确保你的事件处理函数（onDragMove）本身执行效率要高，避免在其中进行复杂的DOM查询或计算。我们的函数只做了简单的坐标计算和赋值，是轻量的。

5.2 拖拽与页面滚动冲突

问题描述：在移动端垂直滑动卡片时，有时会触发整个页面的滚动。

解决方案：

  1. touch-actionCSS属性：在卡片容器上设置touch-action: pan-y;。这告诉浏览器，此元素内默认只处理垂直方向的拖动手势，水平方向的拖动由我们自己的JS处理，浏览器不要干预。这是最优雅的解决方案。
  2. 在touchmove中调用preventDefault()：在我们的onDragMove函数中，当判定为水平拖动时，调用event.preventDefault()可以阻止默认的滚动行为。但要注意，如果这个事件监听被标记为passive: true（Vue的@touchmove.passive），则无法调用preventDefault()。因此我们在绑定全局事件时使用了{ passive: false }选项。
  3. 动态阻止默认行为：我们代码中在startDrag时记录了起始Y坐标，在onDragMove中判断如果主要是垂直拖动（Math.abs(offsetY) > 10 && Math.abs(dragState.offsetX) < 10），则重置拖拽状态，让浏览器恢复滚动。这是一个兼顾体验的策略。

5.3 卡片堆叠顺序（z-index）混乱

问题描述：滑动切换后，卡片的层级显示不正确，后面的卡片可能盖住了前面的。

排查技巧：

  1. 确保z-index计算逻辑正确：在我们的getCardStyle函数中，顶部卡片的z-index最高（如1000），后面每张递减一个足够大的值（如1000 - order * 10）。确保order的计算是基于最新的activeCardIndex。
  2. 检查CSS定位：所有卡片的position必须为absolute或fixed，z-index才生效。同时，它们的容器（.card-stack-container）最好有明确的定位上下文（如position: relative），避免z-index受外部元素影响。
  3. 使用Vue的响应式更新：当activeCardIndex变化时，Vue会重新计算所有卡片的样式。确保你的样式函数是响应式依赖activeCardIndex的。在我们的例子中，getCardStyle(index)在模板中被调用，其内部依赖了dragState.activeCardIndex，Vue能完美追踪并更新。

5.4 快速连续滑动导致状态错乱

问题描述：用户快速滑动卡片，上一张卡的飞出动画还没结束，下一张卡就开始拖拽，导致状态冲突。

解决思路：引入一个“动画锁”状态。在卡片开始切换动画（飞出或复位）时，将一个标志位isAnimating设为true，并在此状态下禁用新的拖拽事件。在CSS动画结束后（监听transitionend事件），再将isAnimating设为false。

// 在dragState中增加 const dragState = reactive({ // ... 其他状态 ... isAnimating: false, }); // 修改startDrag函数开头 const startDrag = (event, index) => { if (index !== dragState.activeCardIndex || dragState.isAnimating) return; // 增加动画锁判断 // ... 其余代码 ... }; // 在触发切换动画的地方（如goToNextCard, removeTopCard, resetCardPosition） const startAnimation = () => { dragState.isAnimating = true; // 假设我们通过一个ref获取顶部卡片DOM元素 const topCardEl = document.querySelector('.card[data-order="0"]'); if (topCardEl) { topCardEl.addEventListener('transitionend', () => { dragState.isAnimating = false; }, { once: true }); // once: true 确保只执行一次 } else { // 保底，设置一个定时器 setTimeout(() => { dragState.isAnimating = false; }, 400); } }; // 然后在切换函数中调用 startAnimation()

5.5 在桌面端鼠标拖拽体验不佳

问题描述：在PC端，鼠标拖拽抬起后，如果鼠标移动过快，有时会误触发mouseenter等其它事件。

优化方案：在onDragEnd中，除了清理mousemove和mouseup事件，还可以临时给文档添加一个透明的全屏遮罩层，并设置pointer-events: none，在短时间内（如100ms）拦截所有鼠标事件，然后再移除。这样可以防止拖拽结束瞬间的鼠标事件被其他元素捕获。

const onDragEnd = () => { // ... 原有的判断逻辑 ... // 桌面端优化：防止鼠标事件冲突 if (!('ontouchstart' in window)) { const overlay = document.createElement('div'); overlay.style.cssText = 'position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; pointer-events:none;'; document.body.appendChild(overlay); setTimeout(() => document.body.removeChild(overlay), 100); } cleanupDragEvents(); };

实现一个流畅的层叠卡片滑动效果，关键在于对细节的掌控：对手势识别的精准处理、对CSS动画性能的优化、以及对Vue响应式数据流的清晰设计。从简单的跟随拖拽，到加入旋转、层叠跟随、惯性滑动、过界回弹等高级特性，每一步都是对前端基础知识的综合运用。

编程学习 学习日记 实战经验
← 返回列表