angular2過渡動畫不起作用

我想將角度轉換應用到元素，但它不起作用。我已經添加了web-animation-js，但仍然沒有效果。加在OnMouseLeave在和的onmouseover功能的實現angular2過渡動畫不起作用

//的package.json

"web-animations-js": "^2.3.1",

//列表項

<li class="list-group-item" (mouseover)="onMouseover()" (mouseleave)="onMouseleave()" [@usrSt]="st" [routerLink]= "['/users', i+1, person.name]" *ngFor="let person of (personsList | filter:coursestat:'chosenCourse'); let i = index">

//列表組件

@Component({ 
    selector: 'app-list', 
    templateUrl: './list.component.html', 
    styleUrls: ['./list.component.css'], 
    animations: [ 
    trigger('usrSt', [ 
     state('active', style({ 'background-color': '#cfd8dc' })), 
     state('inactive', style({ 'bacckground-color': '#fff' })), 
     transition('active => inactive', animate('1400ms ease-in')), 
     transition('inactive => active', animate('400ms ease-out')) 
    ]) 
    ] 
}) 

     export class ListComponent implements OnInit, OnDestroy { 

     public personsList; 
     @Input() id; 
     st; 
     @Input() coursestat: string; 

     constructor(private getDt: InputDataService) { 

     } 

     ngOnInit() { 
     this.personsList = this.getDt.personArr; 
     console.log(this.personsList); 
     this.st = Array.from(this.personsList, _ => 'active'); 
     console.log(this.id); 
     } 

     ngOnDestroy() { 
     console.log('destroy list'); 
     } 

     onMouseover() { 
     this.st = 'active'; 
     } 
     onMouseleave() { 
     this.st = 'inactive'; 
     } 

    }

// plunkr通過Caio Philipe

https://plnkr.co/edit/CrusaB3iCnhDPIVu2oa5?p=preview

來源

2017-10-17 SONGSTER

'onMouseover'和'onMouseleave'的實現在哪裏？ – caiofilipemr

更新了代碼 – SONGSTER

您是否在'app.module'上添加了模塊導入？ '進口：[BrowserModule，BrowserAnimationsModule]' – caiofilipemr

它不工作因爲css屬性bacckground-color拼寫不正確。糾正並重試。它應該工作

來源

2017-10-18 11:58:59 stackedcoder

大聲笑。是的，它的工作。我怎麼沒有發現這一點。哦，上帝，我花了整整一天的時間來試圖找出錯誤的原因。謝謝 – SONGSTER

angular2過渡動畫不起作用

回答

相關問題