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

Question

我想在我的Angular 2材質（角度/材質2）應用程序中添加一些路由器動畫。 沒有動畫所有工作正常，但當我將它們添加到我的組件內容溢出視口和滾動行爲不再工作。

要添加動畫，我已經定義了一個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：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%)" })) 
     ]) 
    ]); 
}