Add some animation to the iboxes

This commit is contained in:
Travis Ralston 2018-03-23 22:12:34 -06:00
parent 7a2627ad76
commit 2e5530179b
3 changed files with 16 additions and 1 deletions

13
web/app/app.animations.ts Normal file
View File

@ -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})),
// ]),
]);

View File

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

View File

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