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"

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"

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 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

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 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

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 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"