Tutorial by Examples

@Component({ ... animations: [ trigger('appear', [ transition(':enter', [ style({ //style applied at the start of animation }), animate('300ms ease-in', style({ ...
The <div> in this template grows to 50px and then 100px and then shrinks back to 20px when you click the button. Each state has an associated style described in the @Component metadata. The logic for whichever state is active can be managed in the component logic. In this case, the component...

Page 1 of 1