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.
This animation can be triggered in two ways;
[@expandCollapse]="state"
to the element and toggling the state
between the 'collapsed'
and 'expanded'
strings manually.
@expandCollapse
to the element and using *ngIf
to toggle the
element.
The animation can be disabled by setting the state to false; [@expandCollapse]="false"
This animation can be triggered in two ways;
[@shake]="state"
to the element and toggling the state
between the false
and true
manually.
@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 animation can be triggered in two ways;
[@fadeIn]="state"
to the element and toggling the state
between the 'void'
and '*'
strings manually.
@fadeIn
to the element and using *ngIf
to toggle the
element.
The animation can be disabled by setting the state to false; [@fadeIn]="false"
Fade Out animation can be triggered in two ways;
[@fadeOut]="state"
to the element and toggling the state
between the 'void'
and '*'
strings manually.
@fadeOut
to the element and using *ngIf
to toggle the
element.
The animation can be disabled by setting the state to false; [@fadeOut]="false"
Slide In animation can be triggered in two ways;
[@slideIn]="state"
to the element and toggling the state
between the 'void'
and '*'
strings manually.
@slideIn
to the element and using *ngIf
to toggle the
element.
The animation can be disabled by setting the state to false; [@slideIn]="false"
Slide Out animation can be triggered in two ways;
[@slideOut]="state"
to the element and toggling the state
between the 'void'
and '*'
strings manually.
@slideOut
to the element and using *ngIf
to toggle the
element.
The animation can be disabled by setting the state to false; [@slideOut]="false"
Zoom In animation can be triggered in two ways;
[@zoomIn]="state"
to the element and toggling the state
between the 'void'
and '*'
strings manually.
@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 animation can be triggered in two ways;
[@zoomOut]="state"
to the element and toggling the state
between the 'void'
and '*'
strings manually.
@zoomOut
to the element and using *ngIf
to toggle the
element.
The animation can be disabled by setting the state to false; [@zoomOut]="false"