React组件CSS初始opacity在Chromium与Firefox中的渲染差异问询

问题确认 #

这确实是Chromium内核浏览器与Firefox的特有行为差异：

• Chromium在动态插入DOM元素时，会把父元素当前的:active状态样式作为元素的初始渲染值，直接忽略了元素自身默认的opacity: 0
• Firefox则会先应用元素自身的默认样式，再响应父元素的:active状态，所以新元素初始opacity保持为0

这种渲染逻辑的差异直接导致了两边过渡方向相反的问题。

纯CSS解决方案 #

方案1：用@starting-style强制初始状态 #

@starting-style是CSS官方用来指定元素插入DOM时初始样式的特性，能直接覆盖Chromium的默认行为：

.item {
  opacity: 0;
  transition: opacity 1s;
  /* 强制新元素插入时的初始透明度为0 */
  @starting-style {
    opacity: 0;
  }
}

.container:active .item {
  opacity: 1;
}

兼容性说明：支持Chromium 117+、Firefox 115+，如果需要兼容更老的浏览器，建议用方案2。

方案2：动画+过渡组合控制 #

通过动画控制元素显示，过渡控制元素隐藏，确保两款浏览器行为一致：

.item {
  opacity: 0;
  /* 初始暂停动画，仅容器:active时播放 */
  animation: showItem 1s forwards paused;
}

.container:active .item {
  animation-play-state: running;
}

/* 容器非:active状态时，用过渡控制元素隐藏 */
.container:not(:active) .item {
  opacity: 0;
  transition: opacity 1s;
}

@keyframes showItem {
  to {
    opacity: 1;
  }
}

这个方案兼容性更广，能适配绝大多数现代浏览器。

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