Question

我在悬停时尝试在我的Bootstrap下拉菜单中获得淡入淡出过渡。到目前为止，我已经尝试了以下但没有运气。

我的尝试

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

.sidebar-nav li:hover .dropdown-menu {
    display: block;
    opacity: 1;
}

这没有用。它推迟了1000毫秒，但没有增加任何过渡。我也试过jQuery，但没有任何运气。

Here's a fiddle with the code - 下拉菜单位于第一个链接＆＃34; Arla nu＆＃34;在菜单中。

Answer 1

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

添加js功能

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

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

将使用JSfiddle

更新答案

更新

检查小提琴 http://jsfiddle.net/pjej7o2m/296/

Answer 2

你好像刚刚告诉你要过渡什么。

.dropdown-menu {
  -webkit-transition: opacity 1000ms ease;
  -moz-transition: opacity 1000ms ease;
  -o-transition: opacity 1000ms ease;
  transition: opacity 1000ms ease;
  opacity: 0;
}
.sidebar-nav li:hover .dropdown-menu {
  opacity: 1;
}

Bootstrap下拉悬停转换

2 个答案: