2016-12-14 5 views
0

모든 버튼 클릭시 축소 축소 한 후 효과를 애니메이션으로 적용하고 싶습니다. 여기에 내가 시도 무엇 : 매우 첫 번째 클릭에각도 2 버튼 클릭 애니메이션

... 
animated: boolean = false; 

clickMe() { 
    this.animated = true; 
} 

이 유일한 작품, 내 animated 때문에 의미가 있습니다 : 여기

@keyframes buttonClickAnimation { 
    0% {transform: scale(0.8);} 
    100% {transform: scale(1);} 
} 
.animated-button { 
    animation: buttonClickAnimation 0.5s; 
} 

내 구성 요소의 : 여기
<button (click)="clickMe()" [ngClass]="{'animated-button': animated}">Button</button> 

내 CSS의 변수는 false으로 다시 설정되지 않습니다. 그러나 false ( clickMe())으로 다시 설정하면 애니메이션을 실행할 시간이 없습니다. 어쩌면 이것이 이것을 구현하는 올바른 방법조차되지 않을 수도 있습니다. 제발 조언 해! 고맙습니다.

답변

0

당신은 !

animated: boolean = false; 

clickMe() { 
    this.animated = !this.animated; 
} 
를 추가하여 부울 (참/거짓) 값을 전환 할 수 있습니다