使用 chrome 的 View Transition API 翻转动画不能平滑地动画背景颜色

Question

我有一个简单的 div，它有背景颜色和文本。状态更改后，我更新 DOM 中的此元素以具有不同的背景颜色和文本（通过 HTMX 完成）。我想使用 Chrome 的新 View Transition API 使这两个 div 之间的过渡具有垂直翻转效果。

我有这个almost使用以下代码工作：

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

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

::view-transition-old(flip-me) {
  animation: flip-out 0.3s;
}
::view-transition-new(flip-me) {
  animation: flip-in 0.3s;
}

.flip-container {
  position: relative;
  width: 300px;
  height: 3rem;
}

.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;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

<div class="flip-container">
  <!-- Starting Div -->
  <div class="flip-me old-color">
    Old Text
  </div>
  <!--This div replaces the one above in the transition --> 
  <div class="flip-me new-color">
    New Text
  </div>
</div>

问题是在动画期间（翻转和翻转）div 的背景颜色变得非常亮。

如何在动画时保持 div 的背景颜色？

Answer 1

最后这很简单，因为在动画中包含不透明度：

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

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