Utilities to help add simple reusable animations and reduce boilerplate code. For custom and complex animations look into the Angular animations doc.
Import individual animation utilities as needed into the component that will contain the elements you want to animate.
Use
tdRotateAnimation
to rotate any element based on a boolean state.
Typescript:
HTML:
Typescript:
HTML:
Degrees of rotation that the dom object will end up in during the "false" state
Degrees of rotation that the dom object will end up in during the "true" state
Duration the animation will run in milliseconds. Defaults to 250 ms.
Delay before the animation will run in milliseconds. Defaults to 0 ms.
Animation accelerate and decelerate style. Defaults to ease-in.
Use
tdCollapseAnimation
to collapse any element based on a boolean state.
Typescript:
HTML:
Duration the animation will run in milliseconds. Defaults to 150 ms.
Delay before the animation will run in milliseconds. Defaults to 0 ms.
Animation accelerates and decelerates when closing. Defaults to ease-in.
Animation accelerates and decelerates when opening. Defaults to ease-out.
Use
TdFadeInOutAnimation
to fade in/out any element based on a boolean state.
Typescript:
HTML:
The anchor name is used to attach the animation to an arbitrary element in the template. Defaults to 'tdFadeInOut'.
Duration the animation will run in milliseconds. Defaults to 150 ms.
Delay before the animation will run in milliseconds. Defaults to 0 ms.
Animation accelerates and decelerates when fading in. Defaults to ease-in.
Animation accelerates and decelerates when fading out. Defaults to ease-out.
Typescript:
HTML:
Duration the animation will run in milliseconds. Defaults to 500 ms.
Delay before the animation will run in milliseconds. Defaults to 0 ms.
Animation accelerate and decelerate style. Defaults to ease-out.