Angular Animation - find the currently animating elements matched by :leave-CodePudding

The ...but that's not enough to differentiate between a :leave and an :enter.

*In case you're wondering what I want to do - I want to set pointer-events: none on the :leave components/elements, to prevent users from clicking on the dom elements during this animation, because at the start of the animation, angular calls onDestroy() on the :leave component, which kinda breaks them, and so clicking on their dom elements during this time span where the animation is running can cause bugs. I'd prefer not to stuff code in each and every component's onDestroy() method to identify them as a ':leave' component, if there's a less tedious way.

I'm on angular 7, but open to solutions that may require upgrading.

CodePudding user response：

If all you want to do is set pointer-events to none during animation for :leave, try setting it within the query itself:

query(':leave', style({ opacity: '0', 'pointer-events': 'none' }), { optional: true }),

CodePudding user response：

You can use AnimationEvent to achieve that.

@Component({ host: { '[@myAnimationTrigger]': 'someExpression', '(@myAnimationTrigger.start)': 'captureStartEvent($event)', '(@myAnimationTrigger.done)': 'captureDoneEvent($event)', }, animations: [ trigger("myAnimationTrigger", [ // ... ]) ] }) class MyComponent { someExpression: any = false; captureStartEvent(event: AnimationEvent) { // the toState, fromState and totalTime data is accessible from the event variable } captureDoneEvent(event: AnimationEvent) { // the toState, fromState and totalTime data is accessible from the event variable } }

The model is like:

interface AnimationEvent { fromState: string toState: string totalTime: number phaseName: string element: any triggerName: string disabled: boolean }

You can determine if you are in :leave from these properties.