固定定位全屏DIV转为相对定位的过渡动画实现问题

你的动画失效核心有两个原因：

1. CSS过渡不支持position属性切换：fixed和relative属于离散属性，浏览器无法生成两者之间的过渡帧，切换时会直接跳变，不会有平滑动画。
2. 尺寸过渡逻辑冲突：初始状态用height:100vh，折叠状态改用padding-bottom:56.25%但未定义height的过渡目标（默认变为auto），导致尺寸变化无过渡效果。

可行解决思路 #

思路1：分阶段动画——先过渡尺寸，再切换定位 #

先保持position:fixed完成尺寸过渡，等动画结束后再切换为position:relative，避免定位属性干扰过渡效果：

.deck-container {
  background-color: red;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  transition: all 0.5s ease-in-out;
}

/* 第一阶段：过渡到16:9尺寸，保持fixed */
.deck-container.collapsed {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

/* 第二阶段：尺寸过渡完成后切换为relative */
.deck-container.collapsed.final {
  position: relative;
  top: auto;
  left: auto;
}

setTimeout(function() {
  const deckContainers = document.querySelectorAll('div.deck-container');
  deckContainers.forEach(container => {
    container.classList.add('collapsed');
    // 等待尺寸过渡完成（和CSS过渡时长一致）
    setTimeout(() => {
      container.classList.add('final');
    }, 500);
  });
}, 800);

思路2：用嵌套容器分离定位与尺寸动画 #

外层容器处理定位切换，内层容器处理尺寸过渡，避免定位属性影响动画：

<div class="deck-container">
  <div class="content"></div>
</div>

.deck-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transition: all 0.5s ease-in-out;
}

.deck-container.collapsed {
  position: relative;
  width: 100%;
  height: auto;
}

.content {
  width: 100%;
  height: 100%;
  background-color: red;
  transition: all 0.5s ease-in-out;
}

.deck-container.collapsed .content {
  aspect-ratio: 16/9;
}

setTimeout(function() {
  const deckContainers = document.querySelectorAll('div.deck-container');
  deckContainers.forEach(container => {
    container.classList.add('collapsed');
  });
}, 800);

思路3：使用transform模拟定位变化（无需切换position） #

如果不需要真正的relative定位特性，可通过transform: scale()和transform-origin模拟缩放至16:9尺寸，同时保持position:fixed，这样所有属性都能过渡：

.deck-container {
  background-color: red;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  transition: transform 0.5s ease-in-out;
  transform-origin: top left;
}

.deck-container.collapsed {
  /* 计算16:9相对于全屏的缩放比例 */
  transform: scale(calc(100vw / (100vh * 16/9)));
}

内容的提问来源于stack exchange，提问作者Léo Durand