我需要在点击事件中实现两种颜色之间的过渡。当前,我的代码如下: Typescript
animations: [
trigger('menubarState', [
state('false', style({backgroundColor:'#43a047'})),
state('true', style({backgroundColor:'#333'})),
transition('false => true', animate('1s')),
transition('true => false', animate('1s'))
])
]
...
export class MenubarComponent {
menuActive: boolean = false;
onMenuClick () {
if (this.menuActive == false) {
this.menuActive = true;
} else {
this.menuActive = false;
}
}
}
HTML
<li [@menubarState]="menuActive" (click)="onMenuClick()">
<a><span class="material-icons icon">apps</span></a>
</li>
这确实会改变background-color
,但改变是瞬间发生的,而不是有过渡效果。
我正在使用Chrome浏览器,最新版本。