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
@if (visibilityStates.expandCollapse) {
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
@if (visibilityStates.shake.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 @if (fadeInSelect.value === 'in') {
Fade In
@if (visibilityStates.fadeIn.in) {
Animated box
}
} @if (fadeInSelect.value === 'top') {
Fade In Top
@if (visibilityStates.fadeIn.top) {
Animated box
}
} @if (fadeInSelect.value === 'bottom') {
Fade In Bottom
@if (visibilityStates.fadeIn.bottom) {
Animated box
}
} @if (fadeInSelect.value === 'left') {
Fade In Left
@if (visibilityStates.fadeIn.left) {
Animated box
}
} @if (fadeInSelect.value === 'right') {
Fade In Right
@if (visibilityStates.fadeIn.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 @if (fadeOutSelect.value === 'out') {
Fade Out
@if (visibilityStates.fadeOut.out) {
Animated box
}
} @if (fadeOutSelect.value === 'top') {
Fade Out Top
@if (visibilityStates.fadeOut.top) {
Animated box
}
} @if (fadeOutSelect.value === 'bottom') {
Fade Out Bottom
@if (visibilityStates.fadeOut.bottom) {
Animated box
}
} @if (fadeOutSelect.value === 'left') {
Fade Out Left
@if (visibilityStates.fadeOut.left) {
Animated box
}
} @if (fadeOutSelect.value === 'right') {
Fade Out Right
@if (visibilityStates.fadeOut.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 @if (slideInSelect.value === 'top') {
Slide In Top
@if (visibilityStates.slideIn.top) {
Animated box
}
} @if (slideInSelect.value === 'bottom') {
Slide In Bottom
@if (visibilityStates.slideIn.bottom) {
Animated box
}
} @if (slideInSelect.value === 'left') {
Slide In Left
@if (visibilityStates.slideIn.left) {
Animated box
}
} @if (slideInSelect.value === 'right') {
Slide In Right
@if (visibilityStates.slideIn.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 @if (slideOutSelect.value === 'top') {
Slide Out Top
@if (visibilityStates.slideOut.top) {
Animated box
}
} @if (slideOutSelect.value === 'bottom') {
Slide Out Bottom
@if (visibilityStates.slideOut.bottom) {
Animated box
}
} @if (slideOutSelect.value === 'left') {
Slide Out Left
@if (visibilityStates.slideOut.left) {
Animated box
}
} @if (slideOutSelect.value === 'right') {
Slide Out Right
@if (visibilityStates.slideOut.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
@if (visibilityStates.zoomIn.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
@if (visibilityStates.zoomOut.out) {
Animated box
}