角2动画错误
我试图做一个简单的动画与角：角2动画错误
import { Component, animate, trigger, state, style, transition } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('divState', [
state('normal', style({
'background-color': 'red',
transform: 'translateX(0)'
})),
state('highlighted', style({
'background-color': 'blue',
transform: 'translateX(100px)'
})),
transition('normal <=> highlighted', animate(300))
])
]
})
export class AppComponent {
private state;
constructor(){
this.state = 'normal';
}
onAnimate() {
this.state == 'normal' ? this.state = 'highlighted' : this.state = 'normal';
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div>
<button (click)="onAnimate()">Switch</button>
</div>
<div style="height: 20px">
<div
style="width: 100px; height: 100px" [@divState]="state">
</div>
但是，如果我按一下按钮它说：
Uncaught ReferenceError: onAnimate is not defined at HTMLButtonElement.onclick ((index):13)
有谁知道那里出了什么问题？
编辑：按钮现在可以工作，但动画仍然失败，div也不显示。
它应该如下。使用(click)，而不是（的onclick），因为角2将触发区（），它触发异步实现变化检测（点击事件，XHR）
<div>
<button (click)="onAnimate()">Switch</button>
</div>
在angular2中它会被'（onclick）'， –
@PardeepJain在角2中（点击）。 –
这里误解了javascript和angular2，我的错误。 –
你应该用事件绑定的位置：
<button (click)="onAnimate()">Switch</button>
检查教程：https://angular.io/docs/ts/latest/guide/user-input.html
必须导入状态依赖。
import {style,animate,state,keyframes } from '@angular/core';
好运！
你的编码是从angular2，但你正在导入angular1.x的文件？ –