角度2:如何使用角度动画淡入/淡出< router-outlet>中的组件.初始加载后? [英] Angular 2: How do I use angular animations to fade in/fade out of components within <router-outlet> after the initial load?

问题描述

截至目前，代码正在按其应有的方式工作(但现在我要哈哈).当页面最初加载并加载时，动画会起作用并淡入.首先被初始化，但是当我在初始页面淡入后访问路线中的动画时，动画不会发生.只是想知道如何对每个同级路线实现动画.

As of right now, the code is working as it should (but now how I want haha). The animation works and fades in when the page initially loads & is first initialized but the animations do not occur when I am accessing routes within the after the initial page fade in. Just wondering how I could implement my animation to each sibling route.

感谢您的帮助，谢谢！

下面是我编写动画的应用程序组件文件.然后，将触发器放入HTML.

Below are my app component files where I wrote the animation. I then put the trigger into the HTML.

app.component.ts

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

app.component.html

<div class="router-outlet-outer" [@main-router] >
    <router-outlet>
    </router-outlet>
</div>

推荐答案

以下博客条目应该回答您所有的问题.

The following blog entry by Cory Rylan should answer all of your questions.

在路由器插座上，我们使用模板变量分配#o ="outlet"创建对插座指令的模板引用.借助对插座指令的引用，我们可以获得路由器路由器何时处于活动状态以触发淡入淡出动画的信息.

On the router outlet, we create a template reference to the outlet directive with the template variable assignment #o="outlet". With this reference to the outlet directive, we can get the information of when the router outlet is active to trigger our fade animation.

<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

这篇关于角度2:如何使用角度动画淡入/淡出< router-outlet>中的组件.初始加载后?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！