Question

我有一个带有两个动画的Angular 6菜单组件：

向上滑动/向下滑动（对于某些屏幕尺寸或页面，它是隐藏的）
淡入/淡出（当我从侧面激活菜单中的幻灯片时）

换句话说，同一元素[@menuSlideAnimation] [@menuFadeAnimation]上有两个动画

如果我将[@.disabled]="true"添加到元素，则它将两者都禁用。如果在方程式中添加额外的<div>，则可以将[@.disabled]="false"放入子元素-但这既笨拙，难以理解，并且在处理静态/粘性定位时会增加各种复杂性。 / p>

我目前不是使用AnimationBuilder创建过渡，因此据我所知，一切都被编译掉了，我不能只访问动画的“实例”。 / p>

如何按名称禁用一个动画？

Answer 1

定义两个相同的open状态，分别称为'open'和'open-instant'。给他们相同的确切状态。

为防止发生动画，我触发了open-instant状态，该状态没有定义的过渡。当我想要动画时，我触发具有定义的open状态的closed => open状态。

   trigger('menuAnimation',
    [
        state('closed', style({
            'transform': 'translate(0, -100%)'
        })),

        state('open', style({
            'transform': 'translate(0, 0%)',
        })),

        state('open-instant', style({
            'transform': 'translate(0, 0%)',
        })),

        // transitions are not triggered for state 'open-instant'
        transition('open => closed', [
            animate('300ms ease-in-out')
        ]),

        transition('closed => open', [
            animate('500ms ease-in-out')
        ])
    ]),

动画已应用于我的宿主组件（这是menu-bar.component文件）。

@HostBinding('@menuSlideAnimation') get menuSlideAnimation() {
    return (this.showMenu ? 'open' : 'closed') + 
           (this.disableSlideAnimation ? '-instant' : '');
}

然后showMenu和disableSlideAnimation只是布尔值。

如何在同一元素上禁用两个Angular动画之一？

1 个答案: