我将我的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 浏览器上产生以下结果:
![](https://i.ibb.co/MPwF9C0/Screenshot-2019-03-12-at-13-37-17.png)