使用CSS transform与Transition时出现随机位置类阴影元素的问题

我之前做3D翻转动画的时候也碰到过类似的诡异残影/伪阴影问题，大概率是浏览器3D渲染的小bug或者属性配置不到位导致的，咱们一步步来解决：

1. 先排查backface-visibility和transform-style配置 #

翻转动画最常见的问题就是背面元素“透出来”，看起来像阴影。你需要确保翻转的容器和它的子元素都正确设置了背面不可见，同时开启3D空间保留：

.flow {
  // 核心3D渲染配置
  transform-style: preserve-3d; // 确保子元素在3D空间中渲染
  backface-visibility: hidden; // 隐藏元素背面
  transition: transform 0.5s ease; // 明确只过渡transform，别用all
  transform: rotateY(0deg); // 初始状态明确

  &.inbound {
    transform: rotateY(180deg); // 翻转后的状态
  }

  // 子元素也要同步设置，避免背面内容透出
  .entity {
    backface-visibility: hidden;
  }
}

2. 解决浏览器硬件加速导致的渲染 artifacts #

有时候GPU加速渲染会出现像素偏移、残影这类奇怪的效果，咱们可以强制浏览器优化这个元素的渲染：

.flow {
  // 加上这两行，强制硬件加速并告诉浏览器提前优化
  will-change: transform;
  transform: translateZ(0);
}

3. 排查冲突的CSS属性 #

如果上面的方法没用，检查一下.flow或者它的子元素有没有设置filter、box-shadow、opacity这类属性，这些属性和transform叠加时，偶尔会触发浏览器的渲染bug。可以暂时注释掉这些属性测试，确认是不是冲突导致的。

4. 确保Angular的类切换稳定 #

因为你用了ngClass绑定current?.flowDirection，要确保这个值的切换是稳定的，避免频繁触发变更检测导致元素反复重绘。比如可以确认flowDirection的取值只有inbound和另一个明确的值（比如outbound），避免出现undefined的情况；如果是列表场景，给循环加上trackBy优化渲染。

试试上面的方法，应该能解决那个随机阴影的问题！

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