angular - Kunde inte bearbeta animationer - returnerade noll element

Animationer slutade fungera när jag skapade en tjänst för mina data. Det verkar bero på att när sidan laddas initialt finns det inga element i ng-repeat (eftersom den hämtar data). Verkar vara ett liknande fall som DET HÄR och DET HÄR:

Fel :

Kan inte bearbeta animationer på grund av följande misslyckade triggerövergångar @listAnimation har misslyckats på grund av: - query(":enter") returnerade noll element. (Använd query(":enter", { optional: true }) om du vill tillåta detta.)

Animation:

trigger('listAnimation', [
      transition('* => *', [
        query(':enter', style({ opacity: 0}), { optional: true }),
        query(':enter', stagger('150ms', [
          animate('.5s ease-in', keyframes([
            style({ opacity: 0, /*transform: 'translateY(-75px)',*/ offest: 0}),
            style({ opacity: .5, /*transform: 'translateY(35px)',*/ offest: .3}),
            style({ opacity: 1, /*transform: 'translateY(0px)',*/ offest: 1})
          ]))
        ]))
      ])
    ])

HTML :

<div [@listAnimation]>
    <div *ngFor="let member of members" class="member-card">
      member info goes here...
    </div>
</div>

Nu, innan du säger "sätt in { optional: true } som felmeddelandet säger"... jag gjorde det - det tar bort felmeddelandet, men får inte själva animationen att fungera:

trigger('listAnimation', [
      transition('* => *', [
        query(':enter', style({ opacity: 0}), { optional: true }),
        query(':enter', stagger('150ms', [
          animate('.5s ease-in', keyframes([
            style({ opacity: 0, /*transform: 'translateY(-75px)',*/ offest: 0}),
            style({ opacity: .5, /*transform: 'translateY(35px)',*/ offest: .3}),
            style({ opacity: 1, /*transform: 'translateY(0px)',*/ offest: 1})
          ]))
        ]), {optional: true})
      ])
    ])

Tänk på att allt detta fungerade innan datan togs ut från appkomponenten. Datan finns där och appen fungerar som vanligt, bara denna animation fungerar inte längre.

Svar #1

trigger('routeAnimations', [
  transition('* <=> *', [
    style({ position: 'relative' }),
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
      }),
    ]),
    query(':enter', [style({ left: '-100%' })]),
    query(':leave', animateChild(), { optional: true }),  //adding here solved my problem
    group([
      query(':leave', [
        animate('300ms ease-out', style({ left: '100%', opacity: 0 })),
      ]),
      query(':enter', [animate('300ms ease-out', style({ left: '0%' }))]),
    ]),
  ]),
])

Svar #2

Se till att visa din listcontainer bara när members-arrayen inte är tom. På så sätt triggas animationen endast när det finns något i din lista.

<div [@listAnimation] *ngIf="members.length > 0">
    <div *ngFor="let member of members" class="member-card">
      member info goes here...
    </div>
</div>

Relaterade artiklar