Add slide animation for new comments

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

-<mat-card class="card-container">
+<mat-card class="card-container" [@slide]>
   <div fxLayout="column">
     <div fxLayout="row">
       <span class="fill-remaining-space"></span>
-      <button mat-icon-button *ngIf="comment.correct || !isStudent" [disabled]="isStudent" (click)="setCorrect(comment)" [matTooltip]="comment.correct ? 'Unmark as correct' : 'Mark as correct'">
+      <button mat-icon-button *ngIf="comment.correct || !isStudent" [disabled]="isStudent" (click)="setCorrect(comment)"
+        [matTooltip]="comment.correct ? 'Unmark as correct' : 'Mark as correct'">
         <mat-icon [ngClass]="{true : 'correct-icon', false: 'incorrect-icon'}[comment.correct]">check_circle</mat-icon>
       </button>
-      <button mat-icon-button *ngIf="comment.favorite || !isStudent" [disabled]="isStudent" (click)="setFavorite(comment)" [matTooltip]="comment.favorite ? 'Mark as not favorite' : 'Mark as favorite'">
+      <button mat-icon-button *ngIf="comment.favorite || !isStudent" [disabled]="isStudent"
+        (click)="setFavorite(comment)" [matTooltip]="comment.favorite ? 'Mark as not favorite' : 'Mark as favorite'">
         <mat-icon [ngClass]="{true: 'favorite-icon', false: 'not-favorite-icon'}[comment.favorite]">star</mat-icon>
       </button>
-      <button mat-icon-button [disabled]="isStudent" (click)="setRead(comment)" [matTooltip]="comment.read ? 'Mark  as unread' : 'Mark as read'">
+      <button mat-icon-button [disabled]="isStudent" (click)="setRead(comment)"
+        [matTooltip]="comment.read ? 'Mark  as unread' : 'Mark as read'">
         <mat-icon [ngClass]="{true: 'read-icon', false: 'unread-icon'}[comment.read]">visibility</mat-icon>
       </button>
     </div>
@@ -26,4 +29,4 @@
       </div>
     </div>
   </div>
-</mat-card>
+</mat-card>
\ No newline at end of file

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

@@ -10,12 +10,20 @@ import { LanguageService } from '../../../services/util/language.service';
 import { WsCommentServiceService } from '../../../services/websockets/ws-comment-service.service';
 import { PresentCommentComponent } from '../_dialogs/present-comment/present-comment.component';
 import { MatDialog } from '@angular/material';
+import { trigger, transition, style, animate, state } from '@angular/animations';
 
 @Component({
   selector: 'app-comment',
   templateUrl: './comment.component.html',
-  styleUrls: ['./comment.component.scss']
+  styleUrls: ['./comment.component.scss'],
+  animations: [
+    trigger('slide', [
+      state('void', style({opacity: 0, transform: 'translateY(-10px)'})),
+      transition('void <=> *', animate(700)),
+    ]),
+  ]
 })
+
 export class CommentComponent implements OnInit {
   @Input() comment: Comment;
   isStudent = false;