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

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

对于某些屏幕大小或隐藏的页面，向上/向下滑动 从侧面激活滑入菜单时淡入/淡出 换句话说，同一元素上有两个动画[@menuSlideAnimation][@menuFadeAnimation]

如果我向元素添加[@.disabled]=true，那么它将同时禁用这两个元素。如果我在等式中添加一个额外的元素，我可以将[@.disabled]=false添加到子元素中——但这既不方便，也很难理解，而且在处理静态/粘性定位时增加了各种复杂性

我目前没有使用创建过渡，因此据我所知，所有内容都被编译掉了，我不能只访问动画的“实例”

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

定义两个相同的打开状态，称为“打开”和“打开即时”。给他们同样的状态

为了防止动画发生，我触发了打开即时状态，它没有定义的转换。当我想要动画时，我会触发打开状态，该状态有一个定义的closed=>open状态

动画将应用于我的主体组件这是menu-bar.component文件

然后showMenu和disableSlideAnimation只是布尔值

   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')
        ])
    ]),

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