How to use transition in Angular?

Anil Kumar
Mar 3, 2024

--

Need to use module or component appraoch ( standalone)

Function for animation — trigger, state, style, animate, transition,

  1. 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')]),
],

--

--