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"