mirror of
https://github.com/turt2live/matrix-dimension.git
synced 2024-08-31 14:12:08 +00:00
Add some animation to the iboxes
This commit is contained in:
parent
7a2627ad76
commit
2e5530179b
13
web/app/app.animations.ts
Normal file
13
web/app/app.animations.ts
Normal 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})),
|
||||
// ]),
|
||||
]);
|
@ -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>
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user