は、ライブラリを使用して使用して、第2のアニメーションを追加する（クリック）角度

Question

イム私がしたいあなたは一例

のクラスアニメーション+ nameOfAnimationを追加する必要が何にアニメーションを追加するためにhttps://daneden.github.io/animate.css/

をアニメーション化ボタンをクリックしたときに2番目のアニメーションを追加すると、私は何かを考え出しました

<button class="heroe-button animated fadeInLeft" (click)="addClass()"> </button> 

addClass():void{ 
$('.heroe-button').removeClass('fadeInLeft'); 
$('.heroe-button').addClass('fadeOutRight'); 
} 

しかし、それは何もしません..私はまた、アニメーションをリセットするために不透明度を追加したり削除したりしません。他の少しのトリックはありませんが、どれも成功しません。

は（基本的に私は何をしたいのか...アニメーションやボタンを押したときに、それはアニメーションもフェードアウト

Answer 1

fadesinボタンは、この例では、@Jan Hamaraコメントで共有リンクからであるということである。

<button class="heroe-button animated fadeInLeft" (click)="addClass()"> </button> 

$(".heroe-button").click(function() { 
     var el = $(this); 

     el.before(el.clone(true)).remove(); 
    }); 

これは、クローン化された要素を作成してから、元の要素を削除します。この方法では、アニメーションを再起動します。

Answer 2

私は角にjqueryのを追加することngClass

の使用をしないで、なぜ悪い考え、だと思います

[ngClass]="{'style1': isClass1Visible, 'style2': isClass2Visible}" 

だからあなたのコード内では次のようになります：こっちngClassのドキュメント

<button class="heroe-button animated" [ngClass]={'fadeInLeft': isVisible, 'fadeOutLeft': !isVisible} (click)="changeVisibility()"> </button> 

changeVisibility() { 
    //Change isVisible variable 
} 

より：https://angular.io/api/common/NgClass