Angularjs Animation
how to handle animation in Angularjs
how to handle animation in Angularjs
Step1:
·
npm install @angular/animations@latest --save
Step2:
v Next,
in the /src/app/app.module.ts file, we add the import:
import { BrowserAnimationsModule } from
'@angular/platform-browser/animations';
Step3: (app.module.ts)
@NgModule({
// Other arrays removed
imports: [
BrowserModule,
FormsModule,
HttpModule,
BrowserAnimationsModule
],
})
Step4: (app.component.ts)
import {
trigger,state,style,transition,animate,keyframes } from '@angular/animations';
@Component({
selector: 'app-root',
template: `
<p>I will animate</p>
`,
styles: [``],
animations: [
// Define animations here.
animations: [
trigger('myAwesomeAnimation', [
state('small', style({
transform: 'scale(1)',
})),
state('large', style({
transform: 'scale(1.2)',
})),
transition('small => large',
animate('100ms ease-in')),
]),
]
]
})
Step5:
(app.component.ts)
·
template:
`
<p [@myAwesomeAnimation]='state'
(click)="animateMe()">I will animate</p>
`,
·
styles:
[`
p {
width:200px;
background:lightgray;
margin: 100px auto;
text-align:center;
padding:20px;
font-size:1.5em;
}
`],
·
export
class AppComponent {
state: string = 'small';
animateMe() {
this.state = (this.state === 'small' ?
'large' : 'small');
} }
Step6:
·
transition('small
<=> large', animate('300ms ease-in', style({
transform: 'translateY(40px)'
}))),
Step7:
·
transition('small
<=> large', animate('300ms ease-in', keyframes([
style({opacity: 0, transform:
'translateY(-75%)', offset: 0}),
style({opacity: 1, transform:
'translateY(35px)', offset: 0.5}),
style({opacity: 1, transform:
'translateY(0)', offset: 1.0})
]))),
