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

Question

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

我正在使用Animate.css来获得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>

JS

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

您可以在Zapping.io

上找到实时版本

Answer 1

我让它在一个例子中工作。我使用了您提供的HTML，然后下载了bounceInDown动画，并将其用于下面示例中的CSS。

jsFiddle example here - 悬停方法

<强>的jQuery

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

如果您想在悬停时添加延迟，请使用以下内容：

jsFiddle example - 有延迟的悬停方法。

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

---

这些示例假设您希望在悬停时触发动画。如果您希望在点击时触发，请使用以下内容：

jsFiddle example点击方法 - 请查看下面的替代非JS方法。

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

---

替代方法 - 没有JS / jQuery

如果您不想使用JavaScript / jQuery，可以使用CSS中的复选框hack。

这基本上在:checked之间切换，从而激活动画。

jsFiddle example - 适用于所有当前浏览器。

<强> HTML

<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>

CSS - _{（仅限部分内容）请参阅上面的示例了解完整的CSS。}

input[type=checkbox]:checked ~ #dropdownalerts {
    display:inline-block;
    -webkit-animation: bounceInDown 1s both;
    -moz-animation: bounceInDown 1s both;
    -o-animation: bounceInDown 1s both;
    animation: bounceInDown 1s both;
}