So this is a time to depth more into Angular animation, lets see that we need see some text, but on click on panel, we shuld see more infomation, of coruse with animation.
lets create TextExpandComponent
ng g c text-expand
my text-expand.component.html should be look that:
<div class="panel-header" (click)="onSwitch()">
<img [@animationRotate]="sStatus" src="../assets/arrow.svg" alt="arrow" /> click me to show more
</div>
<div class="panel-text" [@animationShowHide]="sStatus">
This is a secrect text show only when user click
</div>
and my text-expand.component.ts shoudl be look that:
import { Component } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
@Component({
selector: 'app-text-expand',
templateUrl: './text-expand.component.html',
styleUrls: ['./text-expand.component.scss'],
animations : [
trigger('animationShowHide', [
state('close', style({ height: '0px', overflow: 'hidden' })),
state('open', style({ height: '*',overflow: 'hidden'})),
transition('open <=> close', animate('900ms ease-in-out')),
]),
trigger('animationRotate', [
state('close', style({ transform: 'rotate(0)' })),
state('open', style({ transform: 'rotate(-180deg)' })),
transition('open <=> close', animate('900ms ease-in-out')),
]),
],
})
export class PartialTextExpandComponent {
sStatus = 'close';
onSwitch(){
this.sStatus = this.sStatus === 'close' ? 'open' : 'close';
}
}
Summary we create two animation
first animationRotate witch will be rotate arrow svg
and second animationShowHide witch will be rescale text size to orginal
each animation respect sStatus variable where close and open status we decarate in animation state, switch between two state is declare in open <=> close and has 900ms duration
so nice fun with change each parameter, this is a good way to lern.
Good luck!
Top comments (0)