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，但是没有成功。

- Jack_b_321

---

那段代码有一个错误，在第13行出现了无效或意外的标记。你的浏览器控制台显示了错误吗？ - Andy G

抱歉，我不是故意添加可运行的代码片段的。我已经将其删除了，但动画没有出现错误。它可以正确地进行动画，但我仍然面临着这个z-index问题。分享组件应该显示在任何其他元素的前面，但节拍器图标显示在它上面。 - Jack_b_321

我并没有真正期望它能够运行，但是它突出显示了一个错误，这让我怀疑你是否在浏览器控制台中看到了任何错误。 - Andy G

我已经找到了解决方案。在编译动画时，Angular不能将 -webkit-transform 属性添加到 CSS 中，这意味着在 Webkit 浏览器上它无法正常工作。我已经将 -webkit-transform 属性添加到我的 CSS 中，并且它可以正常工作了。 - Jack_b_321

Angular的scss加载器会添加供应商前缀，但我认为这在JavaScript端（Angular动画）不会发生。 - Jack_b_321

Answer 1

我找到了一个解决方案，我尝试将我的translate3d更改为只是translateY，但没有什么区别。所以我在分享组件上设置了“transform：translate3d（0,0,1px）;”，这个分享组件现在以正确的方式覆盖所有其他元素，在所有浏览器中都可以正常显示。"最初的回答"

- Jack_b_321

---

我使用 overflow: hidden; 属性解决了这个问题，将其应用于父元素。 - Whisher

Answer 2

我曾经遇到过类似的问题，涉及到z-index和动画（在转换期间，索引大于0的项目会重叠组件），this article非常有帮助。您只需要在动画之前和之后的样式中设置z-index即可。不要忘记添加position: relative以使z-index正常工作。

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
            })
        )
    ]
),

- Milena Michalska