How to use transition in Angular?
Mar 3, 2024
Need to use module or component appraoch ( standalone)
Function for animation — trigger, state, style, animate, transition,
- Component -
@Component({
selector: 'app-root',
standalone: true,
template: `
<h1>Hello from {{ name }}!</h1>
<a target="_blank" href="https://angular.dev/overview">
Learn more about Angular
</a>
`,
providers: [provideAnimations()],
2. Module — BrowserAnimationsModule
3. Format for Animation adding
@Component({ standalone: true,
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
animations: [ // animation triggers go here ] })
animations: [
state(
'open',
style({
height: '200px',
opacity: 1,
backgroundColor: 'yellow',
})
),
state(
'closed',
style({
height: '100px',
opacity: 0.8,
backgroundColor: 'blue',
})
),
transition('closed => open', [animate('0.5s')]),
],