Bootstrap 3 下拉菜单动画/缓动

Question

我花了几个小时去找到在这个演示中实现平滑下拉功能的JavaScript函数或CSS3规则，但是我没能找到。

然后我试着创建自己的slideToggle：

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

这个下拉菜单不如上面提到的演示效果好，存在一些问题，因为它仅在用户点击.selectopt的顶部时才会向下或向上滑动.dropdown-menu，并且不关心失去焦点或选定选项！考虑到所有这些，请问演示中是什么使得.dropdown-menu具有平滑的滑动和淡入淡出效果？谢谢。

- user3649067

Answer 1

在“下拉菜单”类上使用0.25秒的过渡来实现“花式”淡入淡出效果。 您提到的演示正在使用外部资源。

查看代码。

$("select[name='herolist']").selectpicker({style: 'btn-primary', menuStyle: 'dropdown-inverse'});

你可以看到它使用了来自Bootstrap select plugin的.selectpicker()。传递的对象{style: 'btn-primary', menuStyle: 'dropdown-inverse'}仅包含用于样式化下拉菜单的css类，这些类包含在Flat UI CSS中。当代码执行时，底层HTML将被更改为：

类 dropdown-menu 包含以下规则

.dropdown-menu {
  background-color: #f3f4f5;
  border: none;
  display: block;
  margin-top: 8px;
  opacity: 0;
  padding: 0;
  visibility: hidden;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

结论：使用0.25秒的过渡效果进行“花哨”的淡出。

- Matija Grcic

Answer 2

在这个代码片段中有许多外部资源：

• bootstrap.min.css
• bootstrap.min.js
• flat-ui.css
• bootstrap-select.min.css
• bootstrap-select.js

据我所见，flat-ui.css是负责这个花哨效果的。

我建议从 fiddle 中添加所有外部资源，当你完成下拉菜单后，尝试删除每一个，看看是否有任何一个没有被使用。在 fiddle 中，它们都是必须的。

- franga2000