How to use animate angular on lists when item removed?-CodePudding

I am looking to animate a list of items such that if an item is removed it fades out and the items above slide down to their new position. The items can be of varying height (I am not worried about this part for now)

I am not entirely sure how I should structure it such that the slide animation for the items above slide into the correct position without sliding too far (because the faded element is now gone) and the being jerked into the final position


    animations: [
        trigger('fade', [
          transition(':enter', [
            style({ opacity: 0 }),
            animate(600, style({ opacity: 1 })),
          ]),
    
          transition(':leave', [animate(600, style({ opacity: 0 }))]),
        ]),
    
        trigger('moveDown', [
          state(
            'true',
            style({
              transform: 'translateY(140px)', //this amount will be a variable in the end
            })
          ),
          transition('false => true', animate('600ms ease-out')),
        ]),
      ],
    })

Currently I am setting the state of movedown to true if the fadeout has finished (@fade.done) and the index of the element in the list is less than the element removed In the html


     <div *ngFor="let item of items; let i = index" [@fade] [@moveDown]>
        <panel-item (removeItem)="removeItem(i)">
        </panel-item>
       </div>

CodePudding user response：

Refer to this you will find the solution.

https://stackblitz.com/edit/angular-animation-when-removing

CodePudding user response：

If it helps anyone then the answer/approach is to animate the height of the faded component to 0 directly after its faded out.

If you are adding an element you can element the max-height to smooth the pushing of items up.