Unable to process animations - returned zero elements

Question

Animations stopped working once I created a service for my data. Looks like it's because when the page loads initially there are no elements in the ng-repeat (since it's fetching the data). Seems to be a similar case to THIS and THIS:

Error:

Unable to process animations due to the following failed trigger transitions @listAnimation has failed due to: - query(":enter") returned zero elements. (Use query(":enter", { optional: true }) if you wish to allow this.)

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>

Now before you say "put in { optional: true } like the error message says"... I did that - it gets rid of the error message, but doesn't actually make the animation work:

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})
      ])
    ])

Keep in mind this all worked before taking the data out of app component. The data is there and the app functions as normal, just this animation doesn't work any longer.

Answer 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%' }))]),
    ]),
  ]),
])