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%)" })) 
     ]) 
    ]); 
}