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"
|
<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>
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user