Блог

Я пытался добавить анимацию в строку поиска поверх списка прокрутки в своем проекте angular, открыть/закрыть (установив высоту 0) в зависимости от направления прокрутки, но анимация не анимируется в Safari на Mac и вообще в iOS, хотя она отлично работает в Chrome и Edge. Стиль окончания применяется по истечении указанного времени, но не с анимацией.

Я уже пробовал это, но ничего из этого не помогает:

• установка web-анимации-js и добавление ее в polyfills.ts
• получите триггер прокрутки разными способами (наблюдайте и обрабатывайте событие прокрутки по-разному)

Когда я использую кнопку для запуска анимации, анимация происходит, даже если я начинаю прокрутку во время анимации панели поиска.

Если я использую ngClass для установки нужного стиля для строки поиска и добавления-webkit-продолжительности перехода в css, это работает нормально, но было бы здорово узнать, почему не работает триггер события прокрутки и как это исправить.

Я создал проект stackblitz, чтобы продемонстрировать проблему: демонстрация stackblitz