Angular 2 Material - 路由器動畫打破了sidenav內容並滾動

Question

我正在嘗試在我的Angular 2 Material（angular / material2）應用程序中添加一些路由器動畫。 沒有動畫，一切正常，但當我將它們添加到我的組件時，內容溢出視口，滾動行為不再起作用。

要添加動畫，我已經定義了一個ts文件router.animations.ts ：

import { AnimationEntryMetadata, trigger, state, animate, style, transition } from "@angular/core";

export function slideToLeft(): AnimationEntryMetadata {
    "use strict";
    return trigger("slideToLeft", [
        state("void", style({ position: "fixed", width: "100%" })),
        state("*", style({ position: "fixed", width: "100%" })),
        transition(":enter", [
            style({ transform: "translateX(100%)" }),
            animate("0.5s ease-in-out", style({ transform: "translateX(0%)" }))
        ]),
        transition(":leave", [
            style({ transform: "translateX(0%)" }),
            animate("0.5s ease-in-out", style({ transform: "translateX(-100%)" }))
        ])
    ]);
}

然后在我的組件內：

import { Component } from "@angular/core";
import { slideToLeft } from "./router.animations";

@Component({
    selector: "home",
    templateUrl: "src/home.component.html",
    animations: [slideToLeft()],
    host: { "[@slideToLeft]": "" }
})
export class HomeComponent  {

    constructor() {
    }
}

這是一個顯示問題的plunker：

https://plnkr.co/edit/Vz1iqSmcWwu3QG65Qxgw?p=preview

何我能解決這個問題嗎？

Answer 1

滾動被禁用，因為該組件由於動畫而設置為“position：fixed”。 將第二個狀態更改為“position：relative”並重置離開轉換中的位置將解決此問題：

export function slideToLeft(): AnimationEntryMetadata {
    "use strict";
    return trigger("slideToLeft", [
        state("void", style({ position: "fixed", width: "100%" })),
        state('*', style({position:'relative', width:'100%'}) ),
        transition(":enter", [
            style({ transform: "translateX(100%)" }),
            animate("0.5s ease-in-out", style({ transform: "translateX(0%)" }))
        ]),
        transition(":leave", [
            style({transform: 'translateX(0%)', position:'fixed', width:'100%'}),
            animate("0.5s ease-in-out", style({ transform: "translateX(-100%)" }))
        ])
    ]);
}