引导下拉菜单显示：无完成后动画

Question

我有一个按钮作为下拉菜单和动画显示和隐藏下拉菜单。 如何检查动画完成并添加样式显示：无到下拉菜单

HTML

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle " type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li role="separator" class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
    </ul> 
</div> 

CSS

.open > .dropdown-menu.dropdown-info { 
    opacity: 1; 
    left: 0px; 
} 
.dropdown-menu.dropdown-info { 
    display: block; 
    position: absolute; 
    top:70px; 
    left: 30px; 
    opacity: 0; 
    transition: all 0.2s ease-out; 
    -webkit-transition: all 0.2s ease-out; 
} 

Answer 1

更新：

我终于得到了你的问题，请查看下面的小提琴，了解我如何实现一次性动画效果。

JSFiddle Demo

请让我知道如果这能解决您的问题！

老：

这是否satify您的需求？

默认设置为（display:none）给元素，然后在菜单打开时设置（display:block）！

.open > .dropdown-menu.dropdown-info { 
 
    opacity: 1; 
 
    left: 0px; 
 
    display: block; 
 
} 
 
.dropdown-menu.dropdown-info { 
 
    display:none; 
 
    position: absolute; 
 
    left: 30px; 
 
    opacity: 0; 
 
    transition: all 0.2s ease-out; 
 
    -webkit-transition: all 0.2s ease-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle " type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
    Dropdown 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1"> 
 
    <li><a href="#">Action</a></li> 
 
    <li><a href="#">Another action</a></li> 
 
    <li><a href="#">Something else here</a></li> 
 
    <li role="separator" class="divider"></li> 
 
    <li><a href="#">Separated link</a></li> 
 
    </ul> 
 
</div>

Answer 2

var dropdownSelectors = $('.dropdown'); 
 

 

 
function dropdownEffectData(target) { 
 
    
 
    var effectInDefault = null, 
 
     effectOutDefault = null; 
 
    var dropdown = $(target), 
 
     dropdownMenu = $('.dropdown-menu', target); 
 
    var parentUl = dropdown.parents('ul.nav'); 
 

 

 
    if (parentUl.size() > 0) { 
 
    effectInDefault = parentUl.data('dropdown-in') || null; 
 
    effectOutDefault = parentUl.data('dropdown-out') || null; 
 
    } 
 
    
 
    return { 
 
    target:  target, 
 
    dropdown:  dropdown, 
 
    dropdownMenu: dropdownMenu, 
 
    effectIn:  dropdownMenu.data('dropdown-in') || effectInDefault, 
 
    effectOut: dropdownMenu.data('dropdown-out') || effectOutDefault, 
 
    }; 
 
} 
 

 
// Custom function to start effect (in or out) 
 
// ========================= 
 
function dropdownEffectStart(data, effectToStart) { 
 
    if (effectToStart) { 
 
    data.dropdown.addClass('dropdown-animating'); 
 
    data.dropdownMenu.addClass('animated'); 
 
    data.dropdownMenu.addClass(effectToStart);  
 
    } 
 
} 
 

 

 

 
// Bootstrap API hooks 
 
// ========================= 
 
dropdownSelectors.on({ 
 
    "show.bs.dropdown": function() { 
 
    // On show, start in effect 
 
    var dropdown = dropdownEffectData(this); 
 
    dropdownEffectStart(dropdown, dropdown.effectIn); 
 
    }, 
 
    "shown.bs.dropdown": function() { 
 
    // On shown, remove in effect once complete 
 
    var dropdown = dropdownEffectData(this); 
 
    if (dropdown.effectIn && dropdown.effectOut) { 
 
     dropdownEffectEnd(dropdown, function() {}); 
 
    } 
 
    }, 
 
    "hide.bs.dropdown": function(e) { 
 
    // On hide, start out effect 
 
    var dropdown = dropdownEffectData(this); 
 
    if (dropdown.effectOut) { 
 
     e.preventDefault(); 
 
     dropdownEffectStart(dropdown, dropdown.effectOut); 
 
     dropdownEffectEnd(dropdown, function() { 
 
     dropdown.dropdown.removeClass('open'); 
 
     }); 
 
    }  
 
    }, 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<link rel="stylesheet" 
 
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 
 
    
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle " type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
    Dropdown 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu dropdown-info " data-dropdown-in="slideInRight" aria-labelledby="dropdownMenu1"> 
 
    <li><a href="#">Action</a></li> 
 
    <li><a href="#">Another action</a></li> 
 
    <li><a href="#">Something else here</a></li> 
 
    <li role="separator" class="divider"></li> 
 
    <li><a href="#">Separated link</a></li> 
 
    </ul> 
 
</div> 
 

 
    
 

它，我认为是更好的解决方案