如何用Angular Material拖拽实现堆叠卡片Hover展开效果？

一、实现悬停展开与下方卡片下移 #

你当前用position: absolute和--index变量实现了卡片堆叠，要完成悬停展开+下方卡片联动下移，可以通过CSS兄弟选择器+过渡动画实现，同时替换margin-top为性能更优的transform：

1. 基础样式调整
   将原有的margin-top替换为transform: translateY()，避免和CDK拖拽的定位逻辑冲突：

   .card-container {
     position: relative;
     min-height: 600px; /* 根据卡片高度设置容器最小高度 */
   }
   
   .card {
     position: absolute;
     top: 0;
     left: 20px;
     right: 20px;
     height: 200px; /* 默认高度 */
     transform: translateY(calc(35% * var(--index)));
     transition: transform 0.3s ease, height 0.3s ease, z-index 0s;
     z-index: calc(var(--index) + 1); /* 确保上层卡片默认在上方 */
   }
   

2. 悬停展开与下移逻辑
   利用:hover和兄弟选择器~，让悬停卡片展开，并让所有后续卡片下移对应高度：

   .card:hover {
     height: 500px; /* 展开后的高度 */
     z-index: 999; /* 确保悬停卡片在最上层 */
   }
   
   .card:hover ~ .card {
     /* 250px = 展开高度 - 默认高度，根据实际数值调整 */
     transform: translateY(calc(35% * var(--index) + 250px));
   }
   

二、解决拖拽时画面跳动问题 #

拖拽跳动的核心是自定义定位逻辑和CDK拖拽的定位冲突，通过以下方式修复：

1. 利用CDK内置状态类优化拖拽样式
   禁用拖拽预览和动画过程中的自定义定位，让CDK全权控制拖拽时的元素位置：

   /* 拖拽预览元素样式，保持和原卡片一致 */
   .cdk-drag-preview {
     height: 200px;
     transform: none !important;
     box-shadow: 0 5px 15px rgba(0,0,0,0.2);
   }
   
   /* 拖拽动画用transform过渡，避免margin/top导致的卡顿 */
   .cdk-drag-animating {
     transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
   }
   

2. 拖拽结束后更新卡片索引
   在拖拽完成后，重新为每个卡片设置--index变量，确保堆叠逻辑正常：

   import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
   
   drop(event: CdkDragDrop<any[]>) {
     // 重排数据数组
     moveItemInArray(this.cardList, event.previousIndex, event.currentIndex);
     // 延迟更新DOM的--index变量，确保DOM已完成重排
     setTimeout(() => {
       document.querySelectorAll('.card').forEach((card, index) => {
         card.style.setProperty('--index', index.toString());
       });
     }, 0);
   }
   

额外提示 #

• 确保卡片容器设置了position: relative，否则absolute定位的卡片会相对于页面定位。
• 过渡动画尽量只作用于transform和opacity这类GPU加速属性，避免页面重绘卡顿。

内容的提问来源于stack exchange，提问作者fergardi