Matrix-Mirrors/matrix-dimension
1
0
Fork 0
mirror of https://github.com/turt2live/matrix-dimension.git synced 2024-07-18 08:51:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add some animation to the iboxes

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

2
web/app/elements/ibox/ibox.component.html
View File

@ -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>

2
web/app/elements/ibox/ibox.component.ts
View File

@ -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;