Почему не работает анимация при прокрутке в розетке маршрутизатора и как это исправить?

Я пытаюсь заставить анимацию при прокрутке работать в интерфейсе angular7, однако она не работает в маршрутизаторе. Я предполагаю, что это связано с тем, как угловые управляют положением прокрутки внутри выходов маршрутизатора, как было предложено во многих связанных вопросах прокрутки.

Мои вопросы: Как можно достичь намеченного поведения в выходах маршрутизатора? Это вообще возможно? У кого-нибудь есть объяснение, почему возникает проблема?

В частности, я хотел бы применить анимацию zoomIn из animations.css к некоторым элементам div, когда они достигнуты с помощью прокрутки. Чтобы заставить это работать, я использую пакет "ng2-animate-on-scroll", который работает хорошо, пока div не расположены внутри маршрутизатора.

В моем app.component.html:

<div animateOnScroll animationName="animated zoomIn">
     text to zoom in on scroll <---works
</div>

<router-outlet></router-outlet> <--- everything in here doesn't work

<div animateOnScroll animationName="animated zoomIn">
     text to zoom in on scroll <---doesn't work
</div>

Когда я размещаю некоторые div в файле app.component.html над выходом маршрутизатора, анимации при прокрутке видны и работают, как и ожидалось. Однако все, что находится внутри роутера или ниже, не анимировано.

Какие-либо предложения?

1 ответ

Оказывается, что страницы в router-outlet используют свой собственный модуль, поэтому ng2-animate-on-scroll был импортирован в неправильный файл модуля. По-видимому, он не может быть унаследован от app.module.ts.

Другие вопросы по тегам