gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 19:29:43 25 4
gpt4 key购买 nike

我正在尝试在我的 Angular 2 Material (angular/material2) 应用程序中添加一些路由器动画。没有动画一切正常,但当我将它们添加到我的组件时,内容溢出视口(viewport)并且滚动行为不再起作用。

为了添加动画,我定义了一个 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

我该如何解决这个问题?

最佳答案

由于动画,组件被设置为“位置:固定”,因此滚动被禁用。将第二个状态更改为“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%)" }))
])
]);
}

关于javascript - Angular 2 Material - 路由器动画破坏了 sidenav 内容和滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42366346/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com