如何在Bootstrap中添加下拉菜单淡出动画

How to add Drop down menu fade in animations in Bootstrap

本文关键字：下拉菜单 淡出 动画 添加 Bootstrap      更新时间：2023-09-26

我使用以下代码来显示hover上的下拉菜单-

.dropdown:hover .dropdown-menu {
  display:block;
  margin-top:5px
}
<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></a>
  <ul class="dropdown-menu dropdown-menu-right">
     <li><a href="contact.php">CONTACT</a></li>
     <li><a href="about.php">ABOUT US</a></li>
   </ul>
</li>

使用此代码，菜单出现在悬停，但它是突然的。我想让下拉菜单慢慢淡出

你可以在CSS中使用transition属性。

看看这个教程:

http://www.newmediacampaigns.com/blog/nicer-navigation-with-css-transitions-part-2 

$('#userMenu').on({
  "shown.bs.dropdown": function () {
    $(this).find('.dropdown-menu').addClass('animated fadeIn');
    setTimeout(function(){
    	$('.dropdown-menu').removeClass('animated fade');
    },1000);
  },
  "hide.bs.dropdown":  function(e) {
    e.preventDefault();
    $(this).find('.dropdown-menu').addClass('animated fadeOut');
    setTimeout(function(){
    	$('.dropdown-menu').removeClass('animated fadeOut').parent().removeClass('open');
    },1000);
  }
});
@import url('https://rawgit.com/daneden/animate.css/master/animate.css');
 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="nav navbar-nav">
    <li id="userMenu" class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Open me</a>
        <ul class="dropdown-menu">
            <li><a href="#"><i class="fa fa-sliders"></i>lnk 1</a></li>
            <li><a href="#"><i class="fa fa-user"></i>lnk 2</a></li>
            <li><a href="#"><i class="fa fa-clock-o"></i>lnk 3</a></li>
        </ul>
    </li>
</ul>

相关文章：