如何使用CSS3动画设置下拉菜单的动画？

我想在下拉列表中添加CSS3效果。（就像Instagram.com上的“我的个人资料”一样）

我正在使用CSS3效果

我试过了，但没用

HTML

<a href="#" data-dropdown="dropdownalerts" data-options="is_hover:true"><%=fa_icon "bell"%></a>

<ul id="dropdownalerts" class="f-dropdown text-left animated bounceInDown" data-dropdown-content>
   <li><%=link_to "Facebook", "#"%></li>
   <li><%=link_to "Email", "#" %></li>
</ul>

<label id="click" for="dropdown">Click here</label>
<input style="display:none" type="checkbox" id="dropdown">
<ul id="dropdownalerts" class="f-dropdown text-left" data-dropdown-content>
    <li>Facebook</li>
    <li>Email</li>
</ul>

---

你可以在

上找到一个实时版本，我在一个例子中找到了它。我使用了您提供的HTML，然后下载了

bounceInDown

动画，并将其用于下面示例中的CSS

-悬停法

jQuery

$(document).ready(function(){
  $('a').hover(function() {
    $("ul").addClass('animated bounceInDown');
  },function(){
    $("ul").removeClass('animated bounceInDown');
  });
});

如果要在悬停关闭时添加延迟，请使用以下方法：

-带延迟的悬停方法

$(document).ready(function(){
  $('a').hover(function() {
    $("ul").addClass('animated bounceInDown');
  },function(){setTimeout(function(){
    $("ul").removeClass('animated bounceInDown');
  }, 750);});
});

---

这些示例假设您希望在悬停时启动动画。如果您希望在单击时启动它，请改用如下方式：

单击方法-查看下面的替代非JS方法

$(document).ready(function(){
  $('a').click(function() {
    $("ul").toggleClass('animated bounceInDown');
  });
});

---

替代方法-无JS/jQuery 如果不想使用JavaScript/jQuery，可以在CSS中使用复选框hack

这实际上是在

：checked

之间切换，从而激活动画

-它适用于所有当前浏览器

HTML

<a href="#" data-dropdown="dropdownalerts" data-options="is_hover:true"><%=fa_icon "bell"%></a>

<ul id="dropdownalerts" class="f-dropdown text-left animated bounceInDown" data-dropdown-content>
   <li><%=link_to "Facebook", "#"%></li>
   <li><%=link_to "Email", "#" %></li>
</ul>

<label id="click" for="dropdown">Click here</label>
<input style="display:none" type="checkbox" id="dropdown">
<ul id="dropdownalerts" class="f-dropdown text-left" data-dropdown-content>
    <li>Facebook</li>
    <li>Email</li>
</ul>

---

我不是粗鲁，但你能确认你引用的是

animate.min.css

文件吗？是的，在其他“div”中，它可以工作。我认为问题是当单击下拉菜单，然后打开菜单时，“animate.css”应该触发