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
答
它不工作因为css属性bacckground-color
拼写不正确。纠正并重试。它应该工作
+0
大声笑。是的,它的工作。我怎么没有发现这一点。哦,上帝,我花了整整一天的时间来试图找出错误的原因。谢谢 – SONGSTER
'onMouseover'和'onMouseleave'的实现在哪里? – caiofilipemr
更新了代码 – SONGSTER
您是否在'app.module'上添加了模块导入? '进口:[BrowserModule,BrowserAnimationsModule]' – caiofilipemr