javascript - Bootstrap 3 下拉动画/缓动

Question

我花了几个小时弄清楚是什么 JavaScript 函数或 CSS3 规则使 This Demo 中的 Dropdown 功能流畅。但我想不通。

然后我尝试创建自己的 slideToggle 为:

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

它不如上面提到的演示好，并且存在一些问题，因为它只是在 .dropdown-menu 上下滑动，只有当用户点击 的顶部时.selectopt 并且它不关心失去焦点或选择的选项!。考虑到所有这些，你能告诉我是什么让演示中的 .dropdown-menu 平滑地滑动和淡入淡出吗？谢谢

Answer 1

It's "fancy" fading using transition of 0.25s. on dropdown-menuclass.

你说的demo使用的是外部资源

看代码

$("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 秒的过渡是“花哨的”淡化。