从 div hidden 开始，然后使用 Animate.css fadeIn 和 fadeOut 切换答案

【问题标题】：Start with div hidden then toggle using Animate.css fadeIn and fadeOut从 div hidden 开始，然后使用 Animate.css fadeIn 和 fadeOut 切换
【发布时间】：2023-04-05 05:36:01
【问题描述】：

我正在尝试使用 display: none 使 div 开始隐藏，然后使用 jQuery 通过单击按钮从 Animation.css 切换淡入动画。

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

这是一个有效的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");
  })
})

谢谢！

【问题讨论】：

您发布的代码不足以创建minimal reproducible example，这使得任何人都无法帮助体验/检查问题以及测试任何可能的解决方案。请尝试在您的问题中添加一个可运行示例。
我现在更新了我的问题以包含一个示例

标签： jquery animate.css

【解决方案1】：

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

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

这是解决问题的方法：

如果在单击按钮时div 没有fadeIn 和fadeOut 类，则表示第一次渲染视图时 div 处于初始状态，因此您需要添加fadeIn 类。
如果在单击按钮时div 确实有fadeIn 但fadeOut 类，则表示之前div 已淡入，现在需要淡出。因此，只需从 div 中删除 fadeIn 并添加 fadeOut 类即可。
最后一种情况与上述情况相反，如果在单击按钮时div有fadeOut类，则需要添加fadeIn并删除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>

【讨论】：