Анимация Angular 7 вызывает проблему с перекрытием z-index в браузерах webkit - PullRequest
Новая
       50

Анимация Angular 7 вызывает проблему с перекрытием z-index в браузерах webkit

5 голосов
/ 12 марта 2019

Я добавил несколько пошаговых анимаций в мое приложение 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:

1 Ответ

1 голос
/ 12 марта 2019

Я нашел решение, я попытался изменить свой translate3d на просто translateY, но это не имело значения. Поэтому я установил transform: translate3d(0, 0, 1px); для компонента общего ресурса, который должен был иметь самый высокий z-индекс, который компонент общего ресурса теперь корректно накладывает на все остальные элементы во всех браузерах.

...