title: Unable to process animations - returned zero elements
body: <p>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 <a href="https://github.com/angular/angular/issues/12924" rel="noreferrer">THIS</a> and <a href="https://github.com/angular/angular/issues/16917" rel="noreferrer">THIS</a>:</p>
  
  <p>Error:</p>
  
  <pre><code>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.)
  </code></pre>
  
  <p>Animation:</p>
  
  <pre><code>trigger('listAnimation', [
        transition('* =&gt; *', [
          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})
            ]))
          ]))
        ])
      ])
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div [@listAnimation]&gt;
      &lt;div *ngFor="let member of members" class="member-card"&gt;
        member info goes here...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now before you say <code>"put in { optional: true } like the error message says"</code>... I did that - <strong>it gets rid of the error message, but doesn't actually make the animation work</strong>:</p>
  
  <pre><code>trigger('listAnimation', [
        transition('* =&gt; *', [
          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})
        ])
      ])
  </code></pre>
  
  <p>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.</p>