Угловой 2 Материал - анимация маршрутизатора сломала содержимое sidenav и прокрутку

Question

Я пытаюсь добавить анимацию роутера в мое приложение Angular 2 Material (угловое/material2). Без анимации все работает нормально, но когда я добавляю их в свои компоненты, содержимое переполняет область просмотра, и поведение прокрутки больше не работает.

Для добавления анимации я определил Т.С. файлу 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». Изменение второго состояния на «положение: относительное» и сброс положения в переходе на отпуск зафиксирует это:

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