Angular 7 个动画导致 webkit 浏览器上的 z-index 重叠问题

Question

我在我的 angular 7 应用程序中添加了一些交错的动画，以便在页面加载时对元素进行动画处理。我在我的一个组件上遇到了这个奇怪的 z-index 问题。

动画代码是这样的：

@Component({
  selector: 'track-page',
  templateUrl: './track-page.component.html',
  styleUrls: ['./track-page.component.scss'],
  animations: [
    trigger('fadeIn', [
      transition(':enter', [
        query('*', style({opacity: 0})),
        query('*', [
            animate('500ms', style({opacity: 1}))
        ]),
      ])
    ]),
    trigger('swipeUp', [
      transition('void => *', [
        query('*', style({opacity: 0, transform: 'translate3d(0,20%,0)'})),
        query('*', stagger(10, [
          animate('700ms ease-in', keyframes([
            style({opacity: 1, transform: 'none', offset: 1})
          ]))
        ]))
      ])
    ])
  ]
})

此代码仅在 webkit 浏览器上导致以下结果：

共享组件应出现在所有其他元素的前面，但节拍器图标出现在顶部。我曾尝试在共享组件上设置最大 z-index，但没有成功。

Answer 1

我找到了一个解决方案，我尝试将我的 translate3d 更改为 translateY，但没有任何效果。因此，我在本应具有最高 z-index 的共享组件上设置 transform: translate3d(0, 0, 1px);，共享组件现在可以在所有浏览器上正确覆盖所有其他元素。

Answer 2

我在 z-indexes 和动画方面遇到了类似的问题（索引 > 0 的项目在过渡期间是重叠组件），this article 非常有帮助。您只需在动画前后的样式中设置 z-index 即可。不要忘记 position: relative 使 z-indexes 起作用。

transition(
    "void => prev", // ---> Entering --->
    [
        // In order to maintain a zIndex of 2 throughout the ENTIRE
        // animation (but not after the animation), we have to define it
        // in both the initial and target styles. Unfortunately, this
        // means that we ALSO have to define target values for the rest
        // of the styles, which we wouldn't normally have to.
        style({
            left: -100,
            opacity: 0.0,
            zIndex: 2
        }),
        animate(
            "200ms ease-in-out",
            style({
                left: 0,
                opacity: 1.0,
                zIndex: 2
            })
        )
    ]
),

Angular 7 个动画导致 webkit 浏览器上的 z-index 重叠问题

Angular 7 animations causes z-index overlapping issue on webkit browsers

javascript

css

css-animations

angular

angular-animations