Animation for newly rendered elements, but not on page load

Question

I'm subscribed to a Firebase real-time database so that when I submit something to it, it immediately renders in the view without any need for jQuery or ajax.

I'd like to animate the rendering of such elements, so that when a new element is added to the DOM its div's background-color is green and slowly fades away. What I don't want is for all divs of this class to perform this animation on load.

I know how to do the former:

@keyframes green-fade {
    0% {background: rgb(173, 235, 173);}
    100% {background: none;}
}

.post-div {
   animation: green-fade 5s ease-in 1;
}

But of course this animation happens for this class any time it's rendered, including on load.

I'm interested in the "Angular 2 way" to do this.

Answer 1

Since Angular 4.25 there's an easier way to do this: If you want to suppress an :enter animation on view initialization, just wrap it with the following animation:

template: `
  <div [@preventInitialChildAnimations]>
    <div [@someAnimation]>...</div>
  </div>
`,
animations: [
  trigger('preventInitialChildAnimations', [
    transition(':enter', [
      query(':enter', [], {optional: true})
    ])
  ]),
  ...
]

Answer 2

Easiest solution:

 @Component({
    selector: 'myComponent',
    template: '<div [@.disabled]="disableAnimations" [@someAnimation]="someValue">',
    animations: [trigger('someAnimation', [transition('* => *', [style({ transform: 'scale(1.1)' }), animate(250)])])]
})
export class MyComponent implements AfterViewInit {

    disableAnimations: boolean = true;

    constructor() {}

    ngAfterViewInit(): void {
        this.disableAnimations = false;
    }
}

Reference: https://angular.io/api/animations/trigger (scroll to "disable animations")