Javascript 角度2材质-路由器动画、导航内容和滚动
我正在尝试在Angular 2材质(Angular/material2)应用程序中添加一些路由器动画。 如果没有动画,一切正常,但当我将它们添加到我的组件时,内容会溢出视口,滚动行为不再起作用 要添加动画,我定义了ts文件router.animations.ts: 然后在我的组件中:Javascript 角度2材质-路由器动画、导航内容和滚动,javascript,angular,animation,angular2-routing,angular-material2,Javascript,Angular,Animation,Angular2 Routing,Angular Material2,我正在尝试在Angular 2材质(Angular/material2)应用程序中添加一些路由器动画。 如果没有动画,一切正常,但当我将它们添加到我的组件时,内容会溢出视口,滚动行为不再起作用 要添加动画,我定义了ts文件router.animations.ts: 然后在我的组件中: import { Component } from "@angular/core"; import { slideToLeft } from "./router.animations"; @Component({
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,它显示了问题:
我能解决这个问题吗?由于动画的原因,组件被设置为“位置:已修复”,因此滚动被禁用。将第二个状态更改为“位置:相对”,并重置休假转换中的位置将解决此问题:
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%)" }))
])
]);
}
这个问题是你解决的吗?
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%)" }))
])
]);
}