javascript - Angular 2 : How do I use angular animations to fade in/fade out of components within after the initial load?

Question

截至目前，代码正常运行(但现在我想要的方式哈哈)。动画在页面最初加载和首次初始化时起作用并淡入，但是当我在初始页面淡入后访问路由时动画不会发生。只是想知道如何为每个兄弟路由实现我的动画。

感谢任何帮助，谢谢!

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

应用程序组件.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>

Answer 1

以下blog entry Cory Rylan 的作品应该可以回答您的所有问题。

---

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