CODEWITHSUNDEEP
angularangular-animations
Michał B
Michał B

Reputation: 473

Angular :leave animation in child elements create cascading delay

I have an animation sequence for enter and leave in my app.

animations: [
    trigger('barSlideInOut', [
      transition(':enter', [
        style({transform: 'translateY(80px)'}),
        animate('0.4s cubic-bezier(0.05, 0.7, 0.1, 1.0)', style({transform: 'translateY(0px)'}))
      ]) ,
      transition(':leave', [
        style({transform: 'translateY(0px)'}),
        animate('0.35s cubic-bezier(0.3, 0.0, 0.8, 0.15)', style({transform: 'translateY(80px)'}))
      ])
    ])
  ]

Child elements in this component also have their own animations.

On :enter everything works as expected, but on :leave I assume that children animations are delayed by parent animation duration because ngDestroy is not fired yet. It ends up with children simply disappear because parent is destroyed.

I there any solution to fix this to fire in same moment? Children animations are binded to host because these are reusable components.

Thanks.

Upvotes: 1

Views: 57

Answers (1)

Rene
Rene

Reputation: 1

If you do something liket this:

    trigger('parentCollapse', [
  transition(':enter', [style({ height: '0', visibility: 'hidden', overflow: "hidden" }), animate('10ms ease-in', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })), query('@slowCollapse', animateChild(), {optional: true})]),
  transition(':leave', [query('@slowCollapse', animateChild()), style({ height: AUTO_STYLE, visibility: AUTO_STYLE, overflow: "hidden" }), animate('300ms ease-out', style({ height: '0', visibility: 'hidden' }))])
]),
trigger('slowCollapse', [
  transition(':enter', [style({ height: '0', minHeight: '0', visibility: 'hidden', overflow: "hidden" }), animate('600ms ease-in', style({ height: AUTO_STYLE, minHeight: AUTO_STYLE, visibility: AUTO_STYLE }))]),
  transition(':leave', [style({ height: AUTO_STYLE, minHeight: AUTO_STYLE, visibility: AUTO_STYLE, overflow: "hidden" }), animate('600ms ease-out', style({ height: '0', minHeight: '0', visibility: 'hidden' }))])
])

Than the animation searches for childs and triggers the animation

Upvotes: 0

Related Questions