使用Chrome View Transition API实现翻转动画时背景色过渡异常

核心原因 #

动画过程中背景色变亮，是因为View Transition的默认根容器带有白色背景，当元素沿X轴翻转时，背面会透出这个白色背景，导致原本的背景色被“提亮”。同时，3D变换的空间设置也需要调整，确保翻转效果正确渲染。

修正后的完整代码 #

CSS 样式

@keyframes flip-in {
  0% {
    transform: rotateX(-180deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

@keyframes flip-out {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(180deg);
  }
}

/* 重置View Transition默认白色背景 */
::view-transition {
  background: transparent;
}

/* 为翻转组添加3D透视空间，确保动画正确渲染 */
::view-transition-group(flip-me) {
  perspective: 1000px;
}

::view-transition-old(flip-me) {
  animation: flip-out 0.3s;
  backface-visibility: hidden;
  background: inherit; /* 继承原元素快照的背景色 */
}

::view-transition-new(flip-me) {
  animation: flip-in 0.3s;
  backface-visibility: hidden;
  background: inherit; /* 继承原元素快照的背景色 */
}

.flip-container {
  position: relative;
  width: 300px;
  height: 3rem;
  transform-style: preserve-3d; /* 将3D空间设置移到容器上，确保子元素3D变换生效 */
}

.flip-me {
  view-transition-name: flip-me;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
}

/* 示例背景色，可根据需求修改 */
.old-color {
  background: #2c3e50;
  color: white;
}

.new-color {
  background: #e74c3c;
  color: white;
}

HTML 结构（结合HTMX）

<div class="flip-container" hx-get="/your-update-endpoint" hx-trigger="click" hx-view-transition="flip-me">
  <!-- 初始状态元素 -->
  <div class="flip-me old-color">
    Old Text
  </div>
</div>

关键调整点 #

1. 移除默认白色背景：通过::view-transition { background: transparent; }消除根容器的白色背景，避免翻转时透出亮色。
2. 继承快照背景色：给::view-transition-old和::view-transition-new设置background: inherit，确保动画过程中使用原元素的真实背景色。
3. 正确设置3D空间：将transform-style: preserve-3d移到父容器.flip-container上，为子元素的3D翻转提供正确的空间环境。
4. HTMX过渡触发：使用hx-view-transition="flip-me"属性，让HTMX在更新DOM时自动启动View Transition动画。

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