Angular animation draft

Last modified 11 days ago / Edit on Github
Warning
This is a draft, the content is not complete and of poor quality!

Notes in this post are just blocks of examples. They're not a full guide to use animation in Angular. For a full guide, read the official documentation.

:enter and :leave

👇 Official doc.

transition ( ':enter', [ ... ] );  // alias for void => *
transition ( ':leave', [ ... ] ); // alias for * => void

With parameters

// Without state
animations: [
trigger('grow', [
transition('* <=> *', [
style({height: '{{startHeight}}px', opacity: 0}),
animate('.5s ease'),
], {params: {startHeight: 0}})
])
]
// With state
animations: [
trigger('dropdownAnimation', [
state('true', style({
maxHeight: '{{numberOfDropdownItems}}px',
overflow: 'hidden'
}), {params: {numberOfDropdownItems: 1}}),
state('false', style({
maxHeight: '0px',
overflow: 'hidden',
opacity:0
})),
transition('true => false', animate('600ms ease-out')),
transition('false => true', animate('1000ms ease-in'))
])
]

Make a reusable component

// fade-in-out.animation.ts
import { trigger, style, animate, transition } from '@angular/animations';

export const fadeInOut = trigger('fadeInOut', [
transition(':enter', [style({ opacity: 0 }), animate('200ms', style({ opacity: 1 }))]),
transition(':leave', [animate('200ms', style({ opacity: 0 }))])
]);
<!-- users.component.html -->
<div @fadeInOut>Content</div>
// users.component.ts
import { fadeInOut } from './fade-in-out.animation';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.scss'],
animations: [fadeInOut]
})
export class UsersComponent implements OnInit {
// Some logics
}

Trigger with states

<!-- data.component.html -->
<div [@dataListTabs]="dataListTabsState">
Content
</div>
// data.component.ts
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
selector: 'app-data',
templateUrl: './data.component.html',
styleUrls: ['./data.component.scss'],
animation: [
trigger('dataListTabs', [
state('expanded', style({ opacity: '1' })),
state('collapsed', style({ opacity: '0' })),
transition('collapsed => expanded', animate('0.4s ease-out')),
transition('expanded => collapsed', animate('0.01s ease-out'))
]),
]
})
export class DataComponent implements OnInit {
dataListTabsState: 'expanded' | 'collapsed';
// Some logics for dataListTabsState
}