Как отключить одну из двух угловых анимаций на одном элементе?

Question

У меня есть компонент меню Angular 6 с двумя анимациями:

• Сдвиг вверх / вниз (для определенных размеров экрана или страниц он скрыт) * ​​1004 *
• Fade in / fade out (когда я активирую слайд в меню сбоку)

Другими словами, на одном элементе есть две анимации [@menuSlideAnimation] [@menuFadeAnimation]

Если я добавлю [@.disabled]="true" к элементу, он отключит оба. Если я добавлю дополнительный <div> в уравнение, я могу добавить [@.disabled]="false" к дочернему элементу - но это и клунки, и за ними трудно следить, и добавляет все виды сложности при работе со статическим / закрепленным позиционированием.

В настоящее время я не использую AnimationBuilder для создания переходов, поэтому, насколько я понимаю, все скомпилировано, и я не могу просто получить доступ к «экземпляру» анимация.

Как отключить одну анимацию по имени?

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 являются просто логическими значениями.