[英]Angular 2 animation with property binding not working
我正在嘗試使div的動畫淡入淡出。
編碼:
import {
Component,
trigger,
state,
style,
transition,
animate,
keyframes,
group
} from '@angular/core';
@Component({
selector: 'my-app',
template: `
<button (click)="toggle()"> toggle div </div>
<div [@visibilityChanged]="visibilityState">
<p>Some text...</p>
</div>`,
animations:
[
trigger('visibilityChanged', [
state('shown', style({opacity: 1})),
state('hidden', style({opacity: 0})),
transition('shown => hidden', animate('600ms')),
transition('hidden=> shown ', animate('300ms')),
])
],
})
export class AppComponent {
visibilityState : string = 'hidden';
toggle(){
if(this.visibilityState === 'hidden')
this.visibilityState = 'shown';
else
this.visibilityState = 'hidden';
}
}
當我運行此代碼時,盡管可見性狀態為“隱藏”,但仍顯示“ Some text ...”。 切換事件不起作用,代碼中的其他單擊事件也不起作用。 當我刪除div時:
<div [@visibilityChanged]="visibilityState">
p>Some text.../p>
</div>`,
該程序運行正常,但無法執行淡入/淡出動畫。 為什么不起作用? 非常感謝!
您的代碼看起來不錯。 據我所知,您使用了錯誤的導入。
從Angular 4開始,動畫位於它們自己的包中,而不是@ angular / core,因此您的import語句將如下所示:
import { trigger, style, transition, animate, group } from '@angular/animations';
您還必須導入BrowserAnimationsModule。 因此,例如在您的AppModule中:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
// ...
imports: [BrowserAnimationsModule]
})
export class AppModule { }
如果沒有安裝AnimationsModule,請運行:
npm install @angular/animations@latest --save
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.