Как оживить выпадающее меню с помощью анимации CSS3?

Я хотел бы добавить эффект 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>

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

Вы можете найти живую версию на Zapping.io

Ответ 1

Я привел его в пример. Я использовал предоставленный вами HTML-код, а затем загрузил анимацию bounceInDown и использовал это для CSS в приведенных ниже примерах.

Пример jsFiddle здесь - метод наведения

JQuery

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

Если вы хотите добавить задержку при падении, используйте что-то вроде этого:

Пример jsFiddle - метод наведения с задержкой.

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

Эти примеры предполагают, что вы хотите, чтобы анимация срабатывала при наведении. Если вы хотите, чтобы он стрелял по щелчку, используйте что-то вроде этого:

пример jsFiddle - посмотрите ниже альтернативный метод, отличный от JS.

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

Альтернативный метод - Нет JS/jQuery

Если вы не хотите использовать JavaScript/jQuery, вы можете использовать checkbox hack в CSS.

Это существенно переключает между :checked, тем самым активируя анимацию.

Пример jsFiddle - он работает во всех текущих браузерах.

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