#Trying to Animate an @for but children are blinking into place rather than sliding on reorder

4 messages · Page 1 of 1 (latest)

quick pine
#

As the title states. I am having an issue with my animation in which the existing children blinks into place when I add/remove another child.

I did some research and saw a couple examples of others having issues but no real solutions... just links to issue tickets.

I do not animate often nor am I a front-end guy so some guidance would be very appreciated. Has anyone dealt with this before? Below is my code this is angular 20

TS:

  trigger('listAnimation', [
    transition('* => *', [
      query(':enter', [
        style({ opacity: 0, transform: 'translateY(20px)' }),
        stagger(100, [
          animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
        ])
      ], { optional: true }),
      query(':leave', [
        stagger(100, [
          animate('300ms ease-in', style({ opacity: 0, transform: 'translateY(20px)' }))
        ])
      ], { optional: true })
    ])
  ])
]

...
trackDept = (_: number, department: Department) => department.dept_acct;

HTML Template:

<mat-divider></mat-divider>
    <div class="department-results-view"  [@listAnimation]="selectedDepartments.length">
        @for (selectedDepartment of selectedDepartments; track trackDept($index, selectedDepartment)) {
        <div class="department-item" >
            <app-workcenter-card [department]="selectedDepartment" [workcenters]="getAllWorkcentersAtDepartment(selectedDepartment)"></app-workcenter-card>
        </div>
        }
    </div>
    <mat-divider></mat-divider>

CSS:

.department-results-view {
  background-color: #3c3c3c;
  display: flex;
  width: 100%;
  flex: 1;
  margin: -7px 0px -7px 0px;
  max-height: 309px;
  max-width: 1200px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 24px 0;
}

.department-item {
  margin: 18px 0;
  display: flex;
  align-items: center;
  transition: transform 300ms ease, opacity 300ms ease;
  position: relative;

}
real tendon
#

It's not clear if you're expecting the existing items to not have any animation when a new one is added, or if you'd like them to have their entering animation replayed.
In any case, consider that package @angular/animations is gonna be deprecated, and it's been not developed in a long time.
Better stick with native css transitions as much as possible.
I'd consider if that complex track function is really needed too.

quick pine
#

Thanks. Is there a preferred alternative to @animations other than CSS?

shell epoch