Try to animate sorting - not working as expected

src/app/components/shared/comment-list/comment-list.component.html

@@ -99,7 +99,7 @@
 
 <div *ngIf="!isLoading">
   <app-comment *ngFor="let current of hideCommentsList ? filteredComments : comments" [comment]="current"
-               [parseVote]="getVote(current)"></app-comment>
+               [parseVote]="getVote(current)" [@sortList]></app-comment>
 </div>
 
 <div *ngIf="comments && comments.length < 1 && !isLoading" fxLayout="row" fxLayoutAlign="center center"

src/app/components/shared/comment-list/comment-list.component.ts

@@ -14,11 +14,28 @@ import { Room } from '../../../models/room';
 import { RoomService } from '../../../services/http/room.service';
 import { VoteService } from '../../../services/http/vote.service';
 import { NotificationService } from '../../../services/util/notification.service';
+import { animate, keyframes, query, stagger, state, style, transition, trigger } from '@angular/animations';
 
 @Component({
   selector: 'app-comment-list',
   templateUrl: './comment-list.component.html',
-  styleUrls: ['./comment-list.component.scss']
+  styleUrls: ['./comment-list.component.scss'],
+  animations: [
+
+    trigger('sortList', [
+      transition('* => *', [
+
+        query(':enter', style({ opacity: 0 }), { optional: true }),
+
+        query(':enter', stagger('0.3s', [
+          animate('1s ease-in', keyframes([
+            style({ opacity: 0, transform: 'translateY(-20%)', offset: 0 }),
+            style({ opacity: .5, transform: 'translateY(10%)',  offset: 0.4 }),
+            style({ opacity: 1, transform: 'translateY(0)',     offset: 1.0 }),
+          ]))]), { optional: true })
+      ])
+    ])
+  ]
 })
 export class CommentListComponent implements OnInit {
   @ViewChild('searchBox') searchField: ElementRef;

src/app/components/shared/comment/comment.component.html

 <mat-card id="comment-card" [ngClass]="{'highlighted': comment.highlighted,
-                                        '': !comment.highlighted}" [@slide]>
+                                        '': !comment.highlighted}">
   <div fxLayout="column">
     <div fxLayout="row">
       <div class="date-container">