Angular 2 route animation not executing on every element

Question

Component that i've defined:

@Component ({
        selector: 'education',
        templateUrl: './education.component.html',
        styleUrls: ['./education.component.css'],
        animations: [ fadeOutAnimation ],    
        host: {
          '[style.display]': 'block',
          '[style.position]': 'fixed',
        }
    })

    export class EducationComponent {
      @HostBinding('@routeAnimation') routeAnimation = true;
    }

Its .html:

<div class="row">
        content in div
</div>
outside of div

Animation:

export const fadeOutAnimation =
  trigger('routeAnimation', [
    state('*', style({
      opacity: 1,
    })),
    transition(':enter', [
      style({
        opacity: 0
      }), animate('1s', style({ opacity: 1}))
    ])
  ])

For some reason the animation only executes on html that is not inside of a div. Content inside <div class="row"></div> appears instantly and the text outside of div fades in as expected. I have no clue what is going on, how can i animate the content that's inside the div element?

Im using chrome on a desktop.

Version 64.0.3282.140 (Official Build) (64-bit)

Answer 1

I've experimented a lot on this and didn't come to a proper conclusion, but apparently this code works now:

export const fadeOutAnimation =
  trigger('fadeOutAnimation', [
    state('*', style({
      opacity: 1,
    })),
    transition(':enter', [
      query('div', [
        style({ opacity: 0 }),
        stagger(75, animate(500, style({ opacity: 1 })))
      ]),
    ])
  ])

I wish i had figured out what was wrong with the other code but it took too long for me.