import { trigger, state,
style, transition, animate }
from
'@angular/animations'
;
import { Component } from
'@angular/core'
;
@Component({
selector:
'app-root'
,
templateUrl:
'./app.component.html'
,
styleUrls: [
'./app.component.css'
],
animations: [
trigger(
'gfg'
,[
state(
'normal'
, style({
'background-color'
:
'red'
,
transform:
'translateX(0)'
})),
state(
'highlighted'
, style({
'background-color'
:
'blue'
,
transform:
'translateX(0)'
})),
transition(
'normal => highlighted'
,animate(1200)),
transition(
'highlighted => normal'
,animate(1000))
])
]
})
export class AppComponent {
state =
'normal'
;
anim(){
this
.state ==
'normal'
?
this
.state =
'highlighted'
:
this
.state =
'normal'
;
}
}