Animations in angular makes our application pleasant to our see and makes user experience more realistic. So i would encourage you to use basic animations on forms, form elements, table or any of the html tags.
You should have BrowserAnimationsModule in module.ts file and then you are good to go 🙂
Just Declare any tag that you want to animate with @xyz as a directive.
Example:-
<ul class=”list-group”>
<li @fade *ngFor=”let item of listItems; let i = index”class=”list-group-item”>{{item}}
<buttonclass=”btn btn-danger right”(click)=”onDeleteItem(i)”>X</button>
</li>
</ul>
Now in your type Script code, inside @Component add this code snippet with necessary declarations at the top and you will see a beautiful effect when you run the application:-
animations: [
trigger(‘fade‘, [
transition(‘void => *’, [
style({ opacity:0, transform:’translate(-10px’ }),
animate(1000)
]),
transition(‘* => void’, [
animate(500, style({ opacity:0, transform:’translate(-100%’ }))
])
])
]
