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)