Add some animation to the iboxes

web/app/app.animations.ts

@@ -0,0 +1,13 @@
+import { animate, style, transition, trigger } from "@angular/animations";
+
+export const ANIMATION_FADE_IN_NOT_OUT =
+    trigger('fadeInNotOutAnimation', [
+        transition(':enter', [
+            style({opacity: 0}),
+            animate('200ms', style({opacity: 1})),
+        ]),
+        // transition(':leave', [
+        //     style({opacity: 1}),
+        //     animate('100ms', style({opacity: 0})),
+        // ]),
+    ]);

web/app/elements/ibox/ibox.component.html

@@ -9,7 +9,7 @@
         <i class="ibox-icon fa" *ngIf="isCollapsible"
            [ngClass]="[collapsed ? 'fa-chevron-right' : 'fa-chevron-down']"></i>
     </div>
-    <div class="ibox-content" *ngIf="!collapsed">
+    <div class="ibox-content" *ngIf="!collapsed" [@fadeInNotOutAnimation]>
         <ng-content select=".my-ibox-content"></ng-content>
     </div>
 </div>

web/app/elements/ibox/ibox.component.ts

@@ -1,9 +1,11 @@
 import { Component, Input, OnInit } from "@angular/core";
+import { ANIMATION_FADE_IN_NOT_OUT } from "../../app.animations";
 
 @Component({
     selector: "my-ibox",
     templateUrl: "./ibox.component.html",
     styleUrls: ["./ibox.component.scss"],
+    animations: [ANIMATION_FADE_IN_NOT_OUT],
 })
 export class IboxComponent implements OnInit {
     @Input() title: string;