Reputation: 81
I tried to make a simple Animation with Angular:
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>
But if I click on the Button it said:
Uncaught ReferenceError: onAnimate is not defined at HTMLButtonElement.onclick ((index):13)
Does anybody know what is wrong there?
Edit: Button works now, but the animation still fails and the div also not shows up.
Upvotes: 0
Views: 1629
Reputation: 627
you must import your state dependence.
import {style,animate,state,keyframes } from '@angular/core';
Luck!
Upvotes: 1
Reputation: 2862
It should be as below . use (click)
instead of (onclick) , because angular 2 will trigger zone() which trigger a change detection on Async implementations (event clicks , XHR , )
<div>
<button (click)="onAnimate()">Switch</button>
</div>
Upvotes: 0
Reputation: 978
You should use event binding here:
<button (click)="onAnimate()">Switch</button>
Check tutorial for more details about event binding: https://angular.io/docs/ts/latest/guide/user-input.html
Upvotes: 0