我已经在我的角度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浏览器上导致以下结果:
共享组件应出现在每个其他元素的前面,但节拍器图标显示在顶部。我尝试在共享组件上设置max z-index,但没有运气。
我找到了一个解决方案,我尝试将translate3d更改为仅仅翻译,但它没有任何区别。因此,我在共享组件上设置了transform: translate3d(0, 0, 1px);
,该共享组件具有最高的z-index,共享组件现在在所有浏览器上正确地覆盖其他所有元素。