CODEWITHSUNDEEP
angularanimation
Simon_Weaver
Simon_Weaver

Reputation: 146110

How to disable one of two Angular animations on the same element?

I have an Angular 6 menu component with two animations :

In other words there are two animations on the same element [@menuSlideAnimation] [@menuFadeAnimation]

If I add [@.disabled]="true" to the element then it disables both. If I add an extra <div> into the equation I can put [@.disabled]="false" to the child element - but this is both klunky, difficult to follow and adds all kinds of complexity when dealing with static / sticky positioning.

I am currently not using AnimationBuilder to create the transitions, so as I understand it everything is compiled away and I can't just access an 'instance' of an animation.

How can I disable one animation by name?

Upvotes: 1

Views: 2043

Answers (1)

Simon_Weaver
Simon_Weaver

Reputation: 146110

Define two identical open states called 'open' and 'open-instant'. Give them the same exact state.

To prevent animation from happening I trigger the open-instant state, which has no defined transitions. When I want animation I trigger the open state which has a defined closed => open state.

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

The animation is applied to my host component (this is the menu-bar.component file).

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

Then showMenu and disableSlideAnimation are just booleans.

Upvotes: 2

Related Questions