Bootstrap 3下拉式转换 [英] Bootstrap 3 dropdown transition

问题描述

首先，这里是小提琴

只是一个常规的引导下拉菜单，我对css做了一些更改，以便在悬停时显示下拉菜单（而不是点击），但我如何需要一个非常简单的淡入淡出动画。我尝试过css转换，但它不起作用，因为.dropdown-menu元素有一个'display：none'应用于它，当它悬停时它变成'display：block'。如何为diplay：none更改为display：block的元素设置动画效果？还是有其他方法可以实现此目的？

我已经使用Google这发现了一些答案，但他们没有帮助。

HTML代码：

 < div class =dropdown > 
< button class =btn btn-default dropdown-toggletype =buttonid =dropdownMenu1data-toggle =dropdown> 
下拉菜单
< span class =caret>< / span> 
< / button> 
< ul class =dropdown-menurole =menuaria-labelledby =dropdownMenu1> 
< li role =presentation>< a role =menuitemtabindex = -  1href =＃>动作< / a>< / li> 
< li role =presentation>< a role =menuitemtabindex = -  1href =＃>另一个操作< / a>< / li> 
< li role =presentation>< a role =menuitemtabindex = -  1href =＃>其他内容< / a>< / li> 
< li role =presentationclass =divider>< / li> 
< li role =presentation>< a role =menuitemtabindex = -  1href =＃>分离链接< / a>< / li> 
< / ul> 
< / div> 
  

CSS代码：

  .dropdown .dropdown-menu {
 opacity：0; 
转换：全部400ms缓解; 
 -moz-transition：全部400ms缓解; 
 -webkit-transition：全部400ms缓解; 
 -o-transition：全部400ms缓解; 
 -ms-transition：全部400ms缓解; 
} 
 .dropdown：hover .dropdown-menu {
 display：block; 
 opacity：1; 
 
  

解决方案

您可以覆盖默认样式显示：没有显示：块，因为您也使用不透明度：0来隐藏菜单。尝试下面的CSS，看看是否能够完成你所需要的。我更新了转换速度以使效果更加明显。

  .dropdown .dropdown-menu {
 display ：block; 
 opacity：0; 
 
 -moz-transition：全部1000ms缓解; 
 -webkit-transition：全部1000ms缓解; 
 -o-transition：全部1000ms缓解; 
 -ms-transition：全部1000ms缓解; 
过渡：全部1000ms缓解; 
} 
 .dropdown：hover .dropdown-menu {
 display：block; 
 opacity：1; 
 
  

小提琴的更新版本： http://jsfiddle.net/pjej7o2m/1/

这里有一个jQuery脚本可能会作为一个替代方法悬停在div上（仍然使用不透明度的css过渡属性）。

$ $ $ $ $ $ $ $（function（）{
var $ menu = $（'。dropdown-menu'）;

$（'。dropdown-toggle'）。hover（
function（）{
$ menu.css（'opacity'，1）;
}，
function（）{
$ menu.css（'opacity'，0）;
}）;
}）（）;

更新的小提琴： http://jsfiddle.net/pjej7o2m/2/

Firstly here's the fiddle

Just a regular bootstrap dropdown, I made a few changes to css so that the dropdown appears on hover (instead of click) but how do I want a very simple fade animation. I tried css transition but it didn't work because the .dropdown-menu element has a 'display: none' applied to it, on hover it changes to 'display: block'. How do I animate an element which changes from 'diplay: none' to 'display: block' or is there any other method to achieve this?

I've already googled this and found out some answer but they didn't help.

HTML Code:

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

CSS Code:

.dropdown .dropdown-menu{
opacity: 0;
transition:         all 400ms ease;
-moz-transition:    all 400ms ease;
-webkit-transition: all 400ms ease;
-o-transition:      all 400ms ease;
-ms-transition:     all 400ms ease;
}
.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
}

解决方案

You can override the default style of display:none with display:block, since you're also using opacity:0 to hide the menu. Give the following CSS a try and see if that accomplishes what you need. I've updated the transition speed to make the effect more apparent.

.dropdown .dropdown-menu{
    display: block;
    opacity: 0;

    -moz-transition:    all 1000ms ease;
    -webkit-transition: all 1000ms ease;
    -o-transition:      all 1000ms ease;
    -ms-transition:     all 1000ms ease;
    transition:         all 1000ms ease;
}
.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
}

Updated version of your fiddle: http://jsfiddle.net/pjej7o2m/1/

Here's a jQuery script that might work as an alternative to hovering over the div (still using the css transition properties for opacity)

$(function(){
  var $menu = $('.dropdown-menu');

  $('.dropdown-toggle').hover(
    function() {
      $menu.css('opacity',1);
    },
    function() {
      $menu.css('opacity',0);
    });
})();

Updated fiddle: http://jsfiddle.net/pjej7o2m/2/

这篇关于Bootstrap 3下拉式转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！