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:

ERROR 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.

Way late but I think you need to add the length of the array being animated like this: `[@listAnimation]='members.length'` — rjustin, Nov 29 '17 at 01:23

score 0 · Answer 1 · edited Apr 29 '21 at 15:01

0

Make sure to display your list container only when the members array is not empty. That way the animation triggers only when there is something in your list.

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

edited Apr 29 '21 at 15:01

Julian

886
10
21

answered Sep 27 '19 at 20:05

Mubramaj

641
9
14

score 0 · Answer 2 · answered Oct 31 '22 at 00:53

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

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Nov 03 '22 at 08:12

Unable to process animations - returned zero elements

2 Answers2