如何使用Vuetify为列表项实现Container Transform Material Design模式？

这类动效的核心是让列表内的目标元素平滑展开并填满父容器，同时保持其他列表项的位置完全不变，视觉上具备清晰的焦点引导效果。以下是具体的实现思路和代码示例：

核心实现原理 #

通过绝对定位+CSS过渡动画实现：

• 给列表容器设置相对定位，作为展开元素的定位基准
• 目标元素展开时切换为绝对定位，脱离文档流，避免影响其他元素布局
• 利用CSS的transition属性，让元素的尺寸、位置、层级属性平滑过渡

代码实现 #

HTML结构 #

<div class="list-container">
  <div class="list-item">列表项1</div>
  <div class="list-item">列表项2</div>
  <div class="list-item">列表项3</div>
</div>

CSS样式 #

/* 列表容器：作为展开元素的定位参考 */
.list-container {
  position: relative;
  width: 320px;
  margin: 2rem auto;
  min-height: 200px;
}

/* 列表项默认样式 */
.list-item {
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  background-color: #f5f5f5;
  border-radius: 4px;
  cursor: pointer;
  /* 定义过渡的属性和动画曲线（Material Design推荐曲线） */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: static;
}

/* 展开状态样式 */
.list-item.expanded {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 10; /* 确保展开元素在顶层 */
  background-color: #e3f2fd;
}

JavaScript交互逻辑 #

const listItems = document.querySelectorAll('.list-item');
let activeExpandedItem = null;

listItems.forEach(item => {
  item.addEventListener('click', () => {
    // 如果点击的是已展开的项，收起它
    if (activeExpandedItem === item) {
      item.classList.remove('expanded');
      activeExpandedItem = null;
      return;
    }

    // 先收起之前展开的项
    if (activeExpandedItem) {
      activeExpandedItem.classList.remove('expanded');
    }

    // 展开当前项
    item.classList.add('expanded');
    activeExpandedItem = item;
  });
});

扩展优化建议 #

• 可根据需求调整过渡时长或缓动函数，适配不同场景的视觉节奏
• 若需要添加内容动效，可给展开项内的子元素添加opacity或transform的过渡属性
• 响应式场景下，可通过媒体查询动态调整容器尺寸，保证展开效果的一致性

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