A project to demonstrate and test Angular animation transitions.
The package
To use the animations feature; you need to install the package:
npm install @angular/animations
You then need to add the 'BrowserAnimationModule' to the 'app.module.ts' file:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
imports: [ ... BrowserAnimationsModule
Note: The 'NoopAnimationModule' conflicts with these animations, and will stop them working.
Animations can only be applied to elements. By adding the transistion animation to a wrapping-div (which may already be in place); you can create the illusion of page transitions.
I've placed the animation within a callable function for cleanness - this is also how one of the Google examples does it.
The below needs to be done for each component that you would like to add the animation to - most likely; the components that handle route requests.
Import the function and the references
import { trigger, state, style, animate, transition } from '@angular/animations';
import { fade } from "../animations/transitions";
Use the function to apply the animation
@Component({
selector: 'test-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
animations: [fade()]
})
Note the 'animations: [fade()]'.
Apply the animation to the element
<div @fade>
Node the '@' sign used to depict an animation.
The animations follow the same pattern as CSS animations, with a starting state, and an end state - though Angular does not yet allow mid-points in animations (just a start and a finish).
The animation goes inside the Component decoration.
Example block:
trigger('fade', [
state('in', style({ opacity: 0 })),
transition(':enter', [
style({ opacity: 0 }),
animate(500, style({ opacity: 1 }))
]),
transition(':leave', [
style({ opacity: 1 }),
animate(500, style({ opacity: 0 }))
])
])
Give the animation an alias
trigger('fade', [
Here the alias for the animation is 'fade'. Aliases are used for applying animations to other elements within templates, too.
Initial state before animations start
state('in', style({ opacity: 0 })),
The 'state' is the default set of styles that the element (or page) should have before the animation(s) start.
'in' refers to the fact that these are styles that should be applied before the animation(s) start - preparing to go 'in' to the animation
Transition
transition(':enter', [
style({ opacity: 0 }),
animate(500, style({ opacity: 1 }))
]),
This is defining the end-point styles that should be animated to, from the 'state'/initial styles.
First you pass the condition that needs to be met before the animation will fire. The page state is 'void' before it is being used, and '*' is a wildcard for any other state - this animation will fire if the page is moving from unused, to anything else.
The common 'fade-in', 'fade-out', states have aliases of thier own (used in the example):
transition(':enter', [ ... ]); // void => *
transition(':leave', [ ... ]); // * => void
Second; you pass the transition. Here we animate the styles, passing an object containing CSS-style notations, and then set the time that the animation should take to finish to '500' (miliseconds).
style({ opacity: 0 }),
animate(500, style({ opacity: 1 }))
This animation will cause the page element to change styles from 'opacity: 0' (set in the 'state' section, and then repeated in the 'style' section of the transition), to 'opacity: 1'.
This page will fade in, finishing in 500 miniseconds, when the page is entered, and back out again when leaving.
Timings
Animation duration can be set using the following:
The file that the function is in is very simple - exporting the above, and not much more:
import { trigger, state, style, animate, transition } from '@angular/animations';
export function fade(timeSpan: number = 1000): any {
return trigger('fade', [
state('in', style({ opacity: 0 })),
transition(':enter', [
style({ opacity: 0 }),
animate(timeSpan, style({ opacity: 1 }))`
`
]),
transition(':leave', [
style({ opacity: 1 }),
animate(timeSpan, style({ opacity: 0 }))
])
]);
}
Angular documentation: https://angular.io/guide/animations
Google Developer Experts: https://medium.com/google-developer-experts/angular-2-animate-router-transitions-6de179e00204