使用 wow.js onclick 动画特定段落答案

【问题标题】：Animate specific paragraph using wow.js onclick使用 wow.js onclick 动画特定段落
【发布时间】：2018-01-31 22:57:34
【问题描述】：

我正在使用 wow.js 在滚动时为页面上的不同元素设置动画。现在我只想在单击按钮时（在 jQuery 中）在特定段落上提升动画。

<p id="reasons" class="wow fadeInUp" data-wow-delay="0.2s">x y z</p>

我不想再次使用动画初始化页面（见下文），而只想为这个具体段落设置动画（使用id = "reasons"）。

new WOW().init();

我该怎么做？

【问题讨论】：

标签： jquery wow.js

【解决方案1】：

HTML：

<button type="button" class="btn btn-default" id="mybutton">button</button>

<p id="reasons" data-wow-delay="0.2s">x y z</p>

JQuery:

$("#mybutton").click(function(){
    $("#reasons").addClass("wow fadeInUp animated");
    $("#reasons").attr("style","visibility: visible; animation-name: fadeInUp;");
});

在引导选项卡上它也可以工作。 :-)

【讨论】：

谢谢！这对我来说非常有效。我用它来隐藏，然后根据单击不同的选项卡在不同的引导面板中淡入淡出。

【解决方案2】：

WOW.js 适用于页面滚动。

您可以在点击时使用 jQuery toggleClass() 方法触发动画。

  $(document).ready(function() {
    $("#reasons").click(function() {
      $(".box").toggleClass("animated");
    });
  });

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="reasons" class="box infinite fadeInUp">Click to animate</p>

我已经添加了一个额外的infinite 类，以便更改更加明显。

确保您已在页面中链接到 animate.css。单击段落会将box 类更改为动画所必需的animated 类。

来源：

Triggering CSS3 Transitions With JavaScript

Animate.css

【讨论】：

谢谢阿什。最后我解决了它调用：$("#reasons").fadeOut(); $("#reasons").fadeIn(); 并且动画 onclick 似乎与 wow.js 相同。