Angular 2:在初始加载之后，如何使用angular动画淡入/淡出<router-outlet>中的组件？
Angular 2:在初始加载之后，如何使用angular动画淡入/淡出<router-outlet>中的组件？
提问于 2018-07-28 02:24:08
到目前为止，代码工作正常(但现在我想要的是哈哈)。动画在页面最初加载时开始工作并淡入，但在初始页面淡入之后，当我访问内部的路由时，动画不会发生。我只是想知道如何将我的动画实现到每个兄弟路线。
感谢您的帮助，谢谢！
下面是我编写动画的应用程序组件文件。然后我将触发器放入HTML中。
app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations:[
trigger('main-router', [
state('in', style({
opacity: 1
})),
transition('void => *', [
style({opacity: 0}),
animate(2000)
]),
transition('* => void', [
style({opacity: 0}),
animate(2000)
])
])
]
})app.component.html
<div class="router-outlet-outer" [@main-router] >
<router-outlet>
</router-outlet>
</div>回答 1
Stack Overflow用户
发布于 2018-07-28 03:06:26
下面由Cory Rylan编写的blog entry将回答您的所有问题。
在路由器outlet上，我们使用模板变量
#o=" outlet“创建对outlet指令的模板引用。通过引用outlet指令，我们可以获得路由器出口何时处于活动状态以触发淡入淡出动画的信息。
<main [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
<router-outlet #o="outlet"></router-outlet>
</main>https://coryrylan.com/blog/introduction-to-angular-router-animations https://stackblitz.com/edit/angular-p2vuku
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51563549
复制相关文章
相似问题