Angular 7 路由器有条件地转换

问题描述

我正在尝试有条件地在 div 上应用动画。我需要根据专用变量滑动顶部或底部。 这是我的动画功能：

export function slidetopOrBottom() {
    return trigger('slidetopOrBottom',[
        state('toTop',style({})),state('toBottom',transition('toTop => void',[
            query(':enter',[
                style({ transform: 'translateY(100%)' }),animate('1s ease-in-out',style({ transform: 'translateY(0%)' }))
            ],{ optional: true }),query(':leave',[
                style({ transform: 'translateY(0%)' }),style({ transform: 'translateY(-100%)' }))
            ],{ optional: true })
        ]),transition('toBottom => void',[
                style({ transform: 'translateY(-100%)' }),style({ transform: 'translateY(100%)' }))
            ],{ optional: true })
        ])
    ])
}

如果我把这个 html 标签放进去就可以了：

<div [@slidetopOrBottom]="'toTop'"> 或 <div [@slidetopOrBottom]="'toBottom'">

我想根据条件将幻灯片应用到顶部或底部，点击顶部或底部按钮，所以我试图这样做：

<div [@slidetopOrBottom]="{value: slideDirection}">

在组件中：

slideDirection: string;

 ngOnInit() {
     this.slideDirection: 'toTop';
}

onBottomClick() {
    this.slideDirection: 'toBottom';
}

onTopClick() {
    this.slideDirection: 'toTop';
}

点击底部按钮，未检测到 slideDirection 的新值，div 滑动到顶部。 有没有办法解决这个问题？ 谢谢

解决方法

您的属性分配不正确。如下使用。

<div [@slideTopOrBottom]="slideDirection">

Stackblitz 示例 - https://stackblitz.com/edit/animated-div-height-cj8ezh?file=src/app/app.component.ts