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

Usage

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

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

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
Fade In Top
Animated box
Fade In Bottom
Animated box
Fade In Left
Animated box
Fade In Right
Animated box

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
Fade Out Top
Animated box
Fade Out Bottom
Animated box
Fade Out Left
Animated box
Fade Out Right
Animated box

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
Slide In Bottom
Animated box
Slide In Left
Animated box
Slide In Right
Animated box

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
Slide Out Bottom
Animated box
Slide Out Left
Animated box
Slide Out Right
Animated box

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

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