Анимация Angular 7 вызывает проблему перекрытия z-индекса в браузерах webkit
Я добавил несколько ступенчатых анимаций в свое приложение angular 7, чтобы элементы анимировались при загрузке страницы. Я столкнулся с этой странной проблемой z-индекса на одном из моих компонентов.
Код анимации такой:
@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-индекс для компонента общего доступа, но безуспешно.
Кроме того, на этом изображении вы что-то обвели, но не объяснили, в чем проблема. Что происходит или не происходит?
Извините, я не хотел добавлять исполняемый фрагмент. Я удалил его сейчас, но с анимацией нет ошибки. Он анимируется правильно, но у меня осталась проблема с z-индексом. Компонент общего доступа должен отображаться перед любым другим элементом, но над ним должен отображаться значок метронома.
Я действительно не ожидал, что его можно будет запустить, но тот факт, что он высветил ошибку, заставил меня задаться вопросом, видели ли вы какую-либо ошибку в консоли вашего браузера.
Код анимации работает так, как я хочу, без ошибок, но у меня остаются перекрывающиеся элементы после завершения анимации,
Вы проверили метроном в своем браузере, чтобы узнать, откуда он берется и где он находится по отношению к вашему компоненту?
Я нашел решение. Angular при компиляции анимации не должен добавлять свойство -wekit-transform в css, что означало, что в браузерах webkit оно не работало правильно. Я добавил свойства преобразования webkit в свой css, и это сработало.
Я рад, что вы решили? Должен ли Angular автоматически добавлять префиксы поставщиков? Я знаю, что есть библиотеки, которые могут это сделать, но не верьте, что это встроено. В любом случае...
Загрузчик Angulars scss добавляет префиксы поставщиков, но я не думаю, что это происходит на стороне javascript (угловые анимации)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я нашел решение, я попытался изменить свой translate3d просто на translateY, но это не имело значения. Поэтому я установил transform: translate3d(0, 0, 1px); для компонента общего доступа, который должен был иметь самый высокий z-индекс, компонент общего доступа теперь корректно перекрывает любой другой элемент во всех браузерах.
JFI Я разобрался с переполнением: скрытый; к родительскому элементу
У меня была аналогичная проблема с z-indexes и анимацией (элементы с индексами> 0 перекрывали компонент во время перехода), и эта статья был очень полезен. Вам просто нужно установить z-index в стиле до и после анимации. Не забудьте position: relative заставить работать z-индексы.
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
})
)
]
),
Этот код содержит ошибку, недопустимый или неожиданный токен в строке 13. Отображается ли ошибка в консоли вашего браузера?