Question

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

为了添加动画，你需要添加类动画+ nameOfAnimation，例如

我想在点击按钮时添加第二个动画，所以我想像

<?php
  $simple = get_field( 'highlight-foto' );
?> 

<script type="text/javascript">
  $("ul.products li.highlight_product a.woocommerce-LoopProduct-link img.attachment-shop_catalog").attr("src", '<?php echo $simple ?>');    
</script>

但这没有做任何事情。我也尝试添加和删除不透明度以重置动画，但两者都没有。几乎没有其他一些技巧，但没有成功。

（基本上我想做的是一个按钮淡入淡出动画效果，当按下按钮时它也会淡出动画..

Answer 1

此示例来自@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添加到angular会是一个坏主意，为什么不使用ngClass

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

所以在你的代码中它就像是：

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

changeVisibility() {
     //Change isVisible variable
}

此处有关于ngClass的更多文档：https://angular.io/api/common/NgClass

使用（单击）角度添加第二个动画

2 个答案: