User Interface

## Animations

Fuse provides set of ready-to-use animations for convenience. You can access them by importing the `FuseAnimations` and set it as the animations property of the @Component metadata.

## Module

import { FuseAnimations } from '@fuse/animations';

## Usage

@Component({ selector : 'my-component', templateUrl: './my-component.component.html', styleUrls : ['./my-component.component.scss'], animations : FuseAnimations }) export class MyComponent { }

## Animations

### Expand / Collapse

This animation can be triggered in two ways;

1. Adding `[@expandCollapse]="state"` to the element and toggling the `state` between the `'collapsed'` and `'expanded'` strings manually.
2. Adding `@expandCollapse` to the element and using `*ngIf` to toggle the element.

The animation can be disabled by setting the state to false; `[@expandCollapse]="false"`

###### Expand / Collapse

Animated box
<!-- Using state --> <div class="animated-box" [@expandCollapse]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @expandCollapse> <div class="animated-box-content"> Animated box </div> </div>

### Shake

This animation can be triggered in two ways;

1. Adding `[@shake]="state"` to the element and toggling the `state` between the `false` and `true` manually.
2. Adding `@shake` to the element and using `*ngIf` to toggle the element.

The animation can be disabled by setting the state to false; `[@shake]="false"`

###### Shake

Animated box
<!-- Using state --> <div class="animated-box" [@shake]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @shake> <div class="animated-box-content"> Animated box </div> </div>

### Fade In

Fade In animation can be triggered in two ways;

1. Adding `[@fadeIn]="state"` to the element and toggling the `state` between the `'void'` and `'*'` strings manually.
2. Adding `@fadeIn` to the element and using `*ngIf` to toggle the element.

The animation can be disabled by setting the state to false; `[@fadeIn]="false"`

Direction In Top Bottom Left Right

###### Fade In

Animated box
<!-- Using state --> <div class="animated-box" [@fadeIn]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @fadeIn> <div class="animated-box-content"> Animated box </div> </div>

###### Fade In Top

Animated box
<!-- Using state --> <div class="animated-box" [@fadeInTop]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @fadeInTop> <div class="animated-box-content"> Animated box </div> </div>

###### Fade In Bottom

Animated box
<!-- Using state --> <div class="animated-box" [@fadeInBottom]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @fadeInBottom> <div class="animated-box-content"> Animated box </div> </div>

###### Fade In Left

Animated box
<!-- Using state --> <div class="animated-box" [@fadeInLeft]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @fadeInLeft> <div class="animated-box-content"> Animated box </div> </div>

###### Fade In Right

Animated box
<!-- Using state --> <div class="animated-box" [@fadeInRight]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @fadeInRight> <div class="animated-box-content"> Animated box </div> </div>

### Fade Out

Fade Out animation can be triggered in two ways;

1. Adding `[@fadeOut]="state"` to the element and toggling the `state` between the `'void'` and `'*'` strings manually.
2. Adding `@fadeOut` to the element and using `*ngIf` to toggle the element.

The animation can be disabled by setting the state to false; `[@fadeOut]="false"`

Direction Out Top Bottom Left Right

###### Fade Out

Animated box
<!-- Using state --> <div class="animated-box" [@fadeOut]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @fadeOut> <div class="animated-box-content"> Animated box </div> </div>

###### Fade Out Top

Animated box
<!-- Using state --> <div class="animated-box" [@fadeOutTop]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @fadeOutTop> <div class="animated-box-content"> Animated box </div> </div>

###### Fade Out Bottom

Animated box
<!-- Using state --> <div class="animated-box" [@fadeOutBottom]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @fadeOutBottom> <div class="animated-box-content"> Animated box </div> </div>

###### Fade Out Left

Animated box
<!-- Using state --> <div class="animated-box" [@fadeOutLeft]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @fadeOutLeft> <div class="animated-box-content"> Animated box </div> </div>

###### Fade Out Right

Animated box
<!-- Using state --> <div class="animated-box" [@fadeOutRight]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @fadeOutRight> <div class="animated-box-content"> Animated box </div> </div>

### Slide In

Slide In animation can be triggered in two ways;

1. Adding `[@slideIn]="state"` to the element and toggling the `state` between the `'void'` and `'*'` strings manually.
2. Adding `@slideIn` to the element and using `*ngIf` to toggle the element.

The animation can be disabled by setting the state to false; `[@slideIn]="false"`

Direction Top Bottom Left Right

###### Slide In Top

Animated box
<!-- Using state --> <div class="animated-box" [@slideInTop]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @slideInTop> <div class="animated-box-content"> Animated box </div> </div>

###### Slide In Bottom

Animated box
<!-- Using state --> <div class="animated-box" [@slideInBottom]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @slideInBottom> <div class="animated-box-content"> Animated box </div> </div>

###### Slide In Left

Animated box
<!-- Using state --> <div class="animated-box" [@slideInLeft]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @slideInLeft> <div class="animated-box-content"> Animated box </div> </div>

###### Slide In Right

Animated box
<!-- Using state --> <div class="animated-box" [@slideInRight]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @slideInRight> <div class="animated-box-content"> Animated box </div> </div>

### Slide Out

Slide Out animation can be triggered in two ways;

1. Adding `[@slideOut]="state"` to the element and toggling the `state` between the `'void'` and `'*'` strings manually.
2. Adding `@slideOut` to the element and using `*ngIf` to toggle the element.

The animation can be disabled by setting the state to false; `[@slideOut]="false"`

Direction Top Bottom Left Right

###### Slide Out Top

Animated box
<!-- Using state --> <div class="animated-box" [@slideOutTop]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @slideOutTop> <div class="animated-box-content"> Animated box </div> </div>

###### Slide Out Bottom

Animated box
<!-- Using state --> <div class="animated-box" [@slideOutBottom]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @slideOutBottom> <div class="animated-box-content"> Animated box </div> </div>

###### Slide Out Left

Animated box
<!-- Using state --> <div class="animated-box" [@slideOutLeft]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @slideOutLeft> <div class="animated-box-content"> Animated box </div> </div>

###### Slide Out Right

Animated box
<!-- Using state --> <div class="animated-box" [@slideOutRight]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @slideOutRight> <div class="animated-box-content"> Animated box </div> </div>

### Zoom In

Zoom In animation can be triggered in two ways;

1. Adding `[@zoomIn]="state"` to the element and toggling the `state` between the `'void'` and `'*'` strings manually.
2. Adding `@zoomIn` to the element and using `*ngIf` to toggle the element.

The animation can be disabled by setting the state to false; `[@zoomIn]="false"`

###### Zoom In

Animated box
<!-- Using state --> <div class="animated-box" [@zoomIn]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @zoomIn> <div class="animated-box-content"> Animated box </div> </div>

### Zoom Out

Zoom Out animation can be triggered in two ways;

1. Adding `[@zoomOut]="state"` to the element and toggling the `state` between the `'void'` and `'*'` strings manually.
2. Adding `@zoomOut` to the element and using `*ngIf` to toggle the element.

The animation can be disabled by setting the state to false; `[@zoomOut]="false"`

###### Zoom Out

Animated box
<!-- Using state --> <div class="animated-box" [@zoomOut]="state"> <div class="animated-box-content"> Animated box </div> </div> <!-- Using *ngIf --> <div class="animated-box" *ngIf="visible" @zoomOut> <div class="animated-box-content"> Animated box </div> </div>