如何让引导导航栏滑动转换工作？答案

【问题标题】：How to get bootstrap navbar sliding transitions working?如何让引导导航栏滑动转换工作？
【发布时间】：2014-01-07 13:00:53
【问题描述】：

刚开始使用 Bootstrap 并希望导航栏下拉菜单有一个漂亮的幻灯片过渡，但不确定在默认引导选项中这是否可行。

我的简化 html 是：

 <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                    <a data-close-others="true" data-toggle="dropdown" data-hover="dropdown" class="dropdown-toggle" href="#">Home</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">page 1</a></li>
                        <li><a href="#">page 2</a></li>
                        <li><a href="#">page 3</a></li>
                    </ul>
            </li>
   </ul>

我有 jquery 和 bootstrap.min.js 文件，但下拉菜单仅在单击时有效，没有漂亮的幻灯片过渡...理想情况下，我希望它像这样工作：http://themeforest.net/item/clava-multipurpose-responsive-html-template/full_screen_preview/6480105

我必须添加悬停效果吗？如果需要，如何添加？使用 javascript 或 css 转换？或者这是否已经内置到 Bootstrap 中？

感谢您的帮助

【问题讨论】：

标签： javascript css twitter-bootstrap transitions

【解决方案1】：

您可以像这样在 .dropdown 和 .open > .dropdown 上使用 CSS 过渡..

演示：http://bootply.com/104214

.open > .dropdown-menu {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);  
  opacity:1;
}

.dropdown-menu {
  opacity:.3;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-animation-fill-mode: forwards;  
  animation-fill-mode: forwards; 
  -webkit-transform: scale(1, 0);
  display: block; 
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
}

【讨论】：