0

我试图让滚动动画在 angular7 前端中工作，但它在路由器插座中不起作用。我认为这与 angular 如何处理路由器插座中的滚动位置有关，正如许多有关滚动的相关问题所建议的那样。

我的问题：如何在路由器插座中实现预期的行为？这甚至可能吗？有人解释为什么会出现问题吗？

具体来说，一旦通过滚动到达某些 div，我想在某些 div 上应用来自 animations.css 的 zoomIn 动画。为了让它工作，我使用了“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>

当我在路由器插座上方的 app.component.html 中放置一些 div 时，滚动上的动画是可见的，并且按预期工作。但是，路由器插座或以下的所有内容都没有动画。

有什么建议么？

4

1 回答 1

1

原来 router-outlet 下的页面使用了他们自己的模块，这就是为什么 ng2-animate-on-scroll 被导入到错误的模块文件中。显然，它不能从 app.module.ts 继承。

于 2019-05-06T00:51:12.583 回答