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

@if (visibilityStates.expandCollapse) {
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

@if (visibilityStates.shake.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 @if (fadeInSelect.value === 'in') {

###### Fade In

@if (visibilityStates.fadeIn.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>
} @if (fadeInSelect.value === 'top') {

###### Fade In Top

@if (visibilityStates.fadeIn.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>
} @if (fadeInSelect.value === 'bottom') {

###### Fade In Bottom

@if (visibilityStates.fadeIn.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>
} @if (fadeInSelect.value === 'left') {

###### Fade In Left

@if (visibilityStates.fadeIn.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>
} @if (fadeInSelect.value === 'right') {

###### Fade In Right

@if (visibilityStates.fadeIn.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 @if (fadeOutSelect.value === 'out') {

###### Fade Out

@if (visibilityStates.fadeOut.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>
} @if (fadeOutSelect.value === 'top') {

###### Fade Out Top

@if (visibilityStates.fadeOut.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>
} @if (fadeOutSelect.value === 'bottom') {

###### Fade Out Bottom

@if (visibilityStates.fadeOut.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>
} @if (fadeOutSelect.value === 'left') {

###### Fade Out Left

@if (visibilityStates.fadeOut.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>
} @if (fadeOutSelect.value === 'right') {

###### Fade Out Right

@if (visibilityStates.fadeOut.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 @if (slideInSelect.value === 'top') {

###### Slide In Top

@if (visibilityStates.slideIn.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>
} @if (slideInSelect.value === 'bottom') {

###### Slide In Bottom

@if (visibilityStates.slideIn.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>
} @if (slideInSelect.value === 'left') {

###### Slide In Left

@if (visibilityStates.slideIn.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>
} @if (slideInSelect.value === 'right') {

###### Slide In Right

@if (visibilityStates.slideIn.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 @if (slideOutSelect.value === 'top') {

###### Slide Out Top

@if (visibilityStates.slideOut.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>
} @if (slideOutSelect.value === 'bottom') {

###### Slide Out Bottom

@if (visibilityStates.slideOut.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>
} @if (slideOutSelect.value === 'left') {

###### Slide Out Left

@if (visibilityStates.slideOut.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>
} @if (slideOutSelect.value === 'right') {

###### Slide Out Right

@if (visibilityStates.slideOut.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

@if (visibilityStates.zoomIn.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

@if (visibilityStates.zoomOut.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>