An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
Some of Our Sources
- TutsPlus - Code
- Spoon Graphics
- Abduzeedo
- Naldz Graphics
- FanExtra - PSD
- Web Design Ledger
- Reencoded
- Wal You
- Android Dissected
- The Verge
Help Webnuz
Referal links:
January 23, 2022 07:20 pm GMT
Original Link: https://dev.to/therealzakarya/a-guide-to-angular-animations-and-transition-39pk
A Guide To Angular Animations and Transition
I had hard times figuring out how angular animation works, so I am making your job easier.
in your component module import BrowserAnimationsModule or any other module that contains BrowserAnimationModule like CommonModule as Follows:
imports: [ BrowserAnimationsModule]in your component add animations inside your component like following I am triggering fadeIn transition animation:
@Component({ selector: 'app-name', templateUrl: './name.component.html', styleUrls: ['./name.component.scss'], animations: [ trigger('fadeIn', [ state('open', style({ opacity: 1, pointerEvents: 'all' })), state('closed', style({ opacity: 0, pointerEvents: 'none' })), transition('open => closed', [ animate('3s') ]), transition('closed => open', [ animate('3s') ]) ]) ]})Then in your HTML use it as follows, I am triggering fadeIn animation based on showAnimation variable condition you can use your own:
<div class="fade" [@fadeIn]="showAnimation ? 'open' : 'closed'"> This will fade in</div><button (click)="showAnimation = !showAnimation">Toggle fade</button>you have to add transition for your element in css:
.fade { transition: all .4s ease;}Your animation should work now
you can animate transform and other properties too, I am just using opacity to fade.
Original Link: https://dev.to/therealzakarya/a-guide-to-angular-animations-and-transition-39pk
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To