是否可以让Twitter Bootstrap下拉菜单淡入？

我试图让Twitter Bootstrap上的标准导航栏下拉菜单淡入，而不是刚刚出现。我曾尝试添加类fade和in，但它似乎不会褪色。这是我的小提琴http://jsfiddle.net/byronyasgur/5zr4r/10/。是否可以让Twitter Bootstrap下拉菜单淡入？

我试着用另一种方式去讨论它 - 例如this question上的答案，但是由于某种原因，我在使用jquery来定位下拉触发器时遇到了问题。

来源

2012-12-11 byronyasgur

玩这个，它看起来像CSS动画效果最好。

.open > .dropdown-menu { 
    animation-name: slidenavAnimation; 
    animation-duration:.2s; 
    animation-iteration-count: 1; 
    animation-timing-function: ease; 
    animation-fill-mode: forwards; 

    -webkit-animation-name: slidenavAnimation; 
    -webkit-animation-duration:.2s; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-timing-function: ease; 
    -webkit-animation-fill-mode: forwards; 

    -moz-animation-name: slidenavAnimation; 
    -moz-animation-duration:.2s; 
    -moz-animation-iteration-count: 1; 
    -moz-animation-timing-function: ease; 
    -moz-animation-fill-mode: forwards; 
} 
@keyframes slidenavAnimation { 
    from { 
    opacity: 0; 
    } 
    to { 
    opacity: 1; 
    } 
} 
@-webkit-keyframes slidenavAnimation { 
    from { 
    opacity: 0; 
    } 
    to { 
    opacity: 1; 
    } 
}

您可以添加其他CSS属性以制作更复杂的动画。举例来说，我一直在玩左：-30 - >左：0

来源

2013-03-19 20:10:46

目前还没有时间测试这个对不起，我不想给你打勾，但很高兴看到它看起来可以在没有JavaScript的情况下完成。谢谢 – byronyasgur

再次我没有测试过这个，但从票数看来它必须工作，显然css是可取的，所以我正在回应滴答 – byronyasgur

我不知道为什么有人不测试他需要什么解决方案。 –

也许做这样的事情用jQuery：

$(function() { 
    $('.dropdown-toggle').click(function() { 
     $(this).next('.dropdown-menu').fadeToggle(500); 
    }); 
});

可以赤这里的小提琴：http://jsfiddle.net/5zr4r/15/

更新：我忘了说，你应该从ul删除fadein。

来源

2012-12-11 23:08:45 Dim13i

由于是这是朝着正确方向迈出的一步。它影响目前的所有下拉菜单，但我确信我可以以某种方式用$（this）对其进行修改......其他问题是，当我点击区域外时它不会取消，但我确信我可以确定出...谢谢 – byronyasgur

不客气！我更新了我的答案，因此它只影响右侧下拉菜单。 – Dim13i

谢谢......实际上，虽然你发布的代码对我来说很好，但是在堆栈溢出中呈现文本时可能会出现问题......因为当我复制该代码块时，它会混淆页面，但是当我只是复制中间线，它工作正常...我认为这与最后两行有关，我无法弄清楚，但你可能想在编辑下查看它，看看帖子中是否有任何奇怪的字符。如果你不能找到它，那么我相信任何未来的访问者都可以输入最后2行，而不是复制它。再次感谢 – byronyasgur

你可以试试这个：

// Add fadeToggle animation to dropdown  
$('.dropdown').on('show.bs.dropdown', function(e) { 
    $(this).find('.dropdown-menu').first().stop(true, true).fadeToggle(500); 
}); 

// Add fadeToggle animation to dropdown 
$('.dropdown').on('hide.bs.dropdown', function(e) { 
    $(this).find('.dropdown-menu').first().stop(true, true).fadeToggle(500); 
});

它利用引导现有show.bs.dropdown和hide.bs.dropdown功能，并改变下拉效应“淡入淡出“而不是”出现“。如果您想使用“幻灯片”，则还可以将fadeToggle()更改为slideDown()。希望这可以帮助。

这里是小提琴：http://jsfiddle.net/ck5c8/

来源

2014-01-29 21:40:07

请解释如何解决手头的问题，以帮助未来的访问者了解这个问题。 – War10ck

我更新了代码，并更好地解释了它如何通过OP解决问题。 –

我找到了很好的解决方案过于：

// Add slideDown animation to dropdown 
$('.dropdown').on('show.bs.dropdown', function(e){ 
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); 
}); 

// Add slideUp animation to dropdown 
$('.dropdown').on('hide.bs.dropdown', function(e){ 
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp(); 
});

例子：http://codepen.io/danielyewright/pen/EvckL

来源

2015-01-02 21:15:54 Nerjuz

我想提出一个现代的，只有CSS的方法：

.dropdown-menu.fade { 
    display: block; 
    opacity: 0; 
    pointer-events: none; 
} 
.open > .dropdown-menu.fade { 
    pointer-events: auto; 
    opacity: 1; 
}

这允许.fade处理tra nsition动画，但.open是控制不透明度和指针状态的东西。

来源

2015-10-12 21:20:44

最佳答案，快速，简单，高效：D –

这个答案比@Benjamin提供的答案更有效。只要确保将类“.fade”添加到与“.dropdown-menu”类相同的元素。 - 它处理淡入和淡出，选择的只会淡入，并在关闭时立即消失。 - 这个答案是更少的代码。 –

小的调整，杰森Featheringham的answer，在引导工作4

.dropdown-menu.fade { 
    display: block; 
    opacity: 0; 
    pointer-events: none; 
} 

.show > .dropdown-menu.fade { 
    pointer-events: auto; 
    opacity: 1; 
}

来源

2017-12-27 05:18:11 Stu

是否可以让Twitter Bootstrap下拉菜单淡入？

回答

相关问题