Angular 2：我如何使用角度動畫淡入/淡出其中的組件<router-outlet>在初始加載之后？

Question

截至目前，代碼正在正常工作（但現在我想要哈哈）。 動畫在頁面最初加載和首次初始化時起作用並淡入，但是當我在初始頁面淡入后訪問路線時動畫不會發生。只是想知道如何將我的動畫實現到每個兄弟路線。

任何幫助表示贊賞，謝謝！

下面是我編寫動畫的應用組件文件。 然后我將觸發器放入 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)
            ])
        ])
    ]
})

應用程序組件.html

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

Answer 1

Cory Rylan 的以下博客條目應該可以回答您的所有問題。

---

在路由器插座上，我們使用模板變量賦值 #o="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