Angular 2 Material - 路由器动画破坏了 sidenav 内容和滚动答案

【问题标题】：Angular 2 Material - Router animations broke sidenav content and scrollAngular 2 Material - 路由器动画破坏了 sidenav 内容和滚动
【发布时间】：2017-07-11 00:26:12
【问题描述】：

我正在尝试在我的 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

我能解决这个问题吗？

【问题讨论】：

你有没有遇到这个问题？

标签： javascript angular animation angular2-routing angular-material2

【解决方案1】：

滚动被禁用，因为组件由于动画而设置为“位置：固定”。将第二个状态更改为“位置：相对”并重置离开过渡中的位置将解决此问题：

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

【讨论】：