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过渡动画不起作用

回答

相关问题