使用(单击)角度添加第二个动画 [英] adding a second animation using (click) angular

问题描述

我正在使用动画animate库 https://daneden.github.io/animate.css/

Im using the library animate https://daneden.github.io/animate.css/

用于向需要添加动画的类添加动画，例如，添加animate + nameOfAnimation类

For adding an animation to whatever you have to add the class animate + nameOfAnimation for example

我想在单击按钮时添加第二个动画，所以我想到了类似的东西

I want to add a second animation when a button is clicked so I figured something like

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

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

但是那什么也没做..我也试图添加和删除不透明度来重置动画，两者都没有.其他技巧很少，但没有成功.

But that doesn't do anything.. I have also tryed to add and remove opacity to reset the animation and neither. Few little other tricks but none succesfull.

(基本上，我想做的是使按钮淡入淡出，并在按下按钮时也淡入淡出..

(Basically what i want to do is that a button fadesin animated and when pressing the button it fades out also animated..

推荐答案

此示例来自评论中共享的@Jan Hamara链接.

This example is from the link @Jan Hamara shared in the comment.

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

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

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

这将创建一个克隆的元素，然后删除原始元素.这样将重新启动动画.

This will create a cloned element and then removes the original element. This way will restart the animation.

这篇关于使用(单击)角度添加第二个动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！