Angular 7 路由器有条件地过渡

Question

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

export function slideTopOrBottom() {
    return trigger('slideTopOrBottom', [
        state('toTop', style({})),
        state('toBottom', style({})),
        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%)' }),
                animate('1s ease-in-out', style({ transform: 'translateY(-100%)' }))
            ], { optional: true })
        ]),
        transition('toBottom => void', [
            query(':enter', [
                style({ transform: 'translateY(-100%)' }),
                animate('1s ease-in-out', style({ transform: 'translateY(0%)' }))
            ], { optional: true }),
            query(':leave', [
                style({ transform: 'translateY(0%)' }),
                animate('1s ease-in-out', 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 滑到顶部。 有没有办法解决这个问题？ 谢谢

Answer 1

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

<div [@slideTopOrBottom]="slideDirection">

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