Question

我正在尝试使用display：无隐藏div，然后单击按钮以使用jQuery切换Animation.css中的fadingIn动画。

但是当我尝试切换动画时，它可以工作，但将其隐藏却不能播放淡出动画。

这是工作中的example：

HTML：

<div class="window animated"></div>

<button style="margin: 100px;">Toggle Fade Window</button>

CSS：

.window{
  background: blue;
  width: 200px;
  height: 200px;
  margin: 20px;
  display: none;
}

JS：

$(function() {
  $("button").click(function() {
    $(".window").toggleClass("fadeIn");
  })
})

谢谢！

Answer 1

存在一些与您的代码相关的问题，以及您对animate.css库的误解：

如果从fadeIn中删除div，它不会自动淡出，则必须在其中添加类fadeOut。
fadeIn将使元素的opacity从0到1，因此在CSS样式中使用display: none时，它将不会工作。

这是解决问题的方法：

如果在单击按钮时div既没有fadeIn也没有fadeOut类，则表示当您首次渲染时div处于其初始状态视图，因此您需要在其中添加fadeIn类。
如果在单击按钮时div确实具有fadeIn但具有fadeOut类，则意味着以前div已经淡入，现在它需要淡入出来。因此，只需从fadeIn中删除div并添加fadeOut类。
最后一种情况与上述情况相反，如果在按钮时fadeIn具有fadeOut类，则需要添加div并删除fadeOut被点击。

这是代码

$(function() {
  $("button").click(function() {
    if ($(".window").hasClass("fadeIn")) {
      // if the div has fadeIn class, remove it and add fadeOut
      $(".window").toggleClass("fadeIn").toggleClass("fadeOut")
    }
    else if ($(".window").hasClass("fadeOut")) {
      // if the div has fadeOut class, remove it and add fadeIn
      $(".window").toggleClass("fadeOut").toggleClass("fadeIn")
    } else {
      // if the div has neither of fadeIn nor fadeOut, add fadeIn class in
      $(".window").toggleClass("fadeIn")
    };
  })
})

.window{
  background: blue;
  width: 200px;
  height: 200px;
  margin: 20px;
  opacity: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="window animated"></div>
<button style="margin: 100px;">Toggle Fade Window</button>

从div隐藏开始，然后使用Animate.css fadeIn和fadeOut进行切换

1 个答案: