如何使用animate.css与jQuery实现隐藏div的显示动画效果？

首先得明确一个关键点：设置了display: none;的元素无法直接应用Animate.css的动画，因为这类元素在页面中不会被渲染，动画效果自然无法触发。所以我们需要先让元素进入可渲染状态，再为它添加动画类。

下面是具体的实现方案，分两种场景供你选择：

场景1：初始状态为display: none;，通过交互触发显示+动画 #

1. HTML结构 #

假设我们用一个按钮来触发菜单显示：

<!-- 初始隐藏的菜单 -->
<div id="manis" style="display: none;">Menu here</div>
<!-- 触发按钮 -->
<button id="showMenuBtn">Show Menu</button>

2. 前置准备 #

确保你已经在页面中引入了Animate.css（不管是本地文件还是CDN引入都可以，这里默认你已经完成这一步）。

3. JavaScript实现 #

我们需要先将菜单的display属性改为可见值（比如block），然后立即为它添加Animate.css的动画类。这里用fadeIn动画举例，你可以换成任何Animate.css支持的动画：

const showBtn = document.getElementById('showMenuBtn');
const menu = document.getElementById('manis');

showBtn.addEventListener('click', () => {
  // 第一步：让元素进入可渲染状态
  menu.style.display = 'block';
  // 第二步：添加Animate.css的动画类（animate__animated是基础类，animate__fadeIn是具体动画）
  menu.classList.add('animate__animated', 'animate__fadeIn');
  
  // 可选优化：动画结束后移除动画类，方便下次重复触发
  menu.addEventListener('animationend', () => {
    menu.classList.remove('animate__animated', 'animate__fadeIn');
  }, { once: true });
});

场景2：初始隐藏但保留渲染状态（推荐，动画更流畅） #

如果允许调整初始隐藏的方式，建议用opacity: 0;和visibility: hidden;代替display: none;，这样元素始终在页面中渲染，只是不可见，动画触发会更流畅：

1. CSS设置初始状态 #

#manis {
  opacity: 0;
  visibility: hidden;
  /* 可选：添加过渡防止动画跳变 */
  transition: opacity 0.1s ease-out;
}

2. JavaScript触发动画 #

const showBtn = document.getElementById('showMenuBtn');
const menu = document.getElementById('manis');

showBtn.addEventListener('click', () => {
  // 先让元素可见
  menu.style.opacity = '1';
  menu.style.visibility = 'visible';
  // 添加动画类
  menu.classList.add('animate__animated', 'animate__fadeIn');
  
  // 动画结束后移除类
  menu.addEventListener('animationend', () => {
    menu.classList.remove('animate__animated', 'animate__fadeIn');
  }, { once: true });
});

小提示 #

• Animate.css从版本4开始统一使用animate__前缀，比如animate__fadeIn，如果是旧版本则没有这个前缀，记得对应调整类名。
• 如果需要重复触发动画，一定要在每次触发前移除之前的动画类，否则第二次点击可能不会生效。

内容的提问来源于stack exchange，提问作者Anon Nymous