Angular UI Bootstrap 下拉过渡

Question

这里的 Stack Overflow 和 AngularJS 都是菜鸟。我正在尝试向我的下拉菜单添加淡入动画（来自 UI Bootstrap 的下拉指令）但无济于事。

这与这个问题非常相似： Bootstrap 3 dropdown transition ，但我想知道是否有 Angular（非 jQuery）方法？

很高兴在这里提出我的第一个问题。

这是我正在使用的代码（从 UI Bootstrap 的默认下拉列表中提取）：

<div class="btn-group" dropdown is-open="status.isopen">
    <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
      Button dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>

这里是 plunker：http://plnkr.co/edit/CmAZv4DTeda4X0bnkQwQ

Answer 1

已更新 以处理 fadein/out 转换。

这是一个纯粹的 CSS 实现。请记住，CSS3 动画在旧版浏览器 (< IE10) 中不受支持。以下是如何将 CSS3 动画应用于 bootstrap 的下拉菜单。

CSS 转换在目标属性（或属性）更改值时执行。这是一篇关于使用它们的 MDN 文章：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

笨蛋在这里：http://plnkr.co/edit/bFj6NkfrVk0qJbG3gwFx?p=preview

CSS

.open > .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.dropdown-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 500ms ease, visibility 500ms ease;
  -moz-transition: opacity 500ms ease, visibility 500ms ease;
  -o-transition: opacity 500ms ease, visibility 500ms ease;
  transition: opacity 500ms ease, visibility 500ms ease;
}

没有 display: block，这些转换将不起作用。使用 visibility 属性将保持相同的效果。我有另一个没有 visibility 的工作示例；但是，它要求您保持 z-index，我认为这不会更好。

Angular UI Bootstrap 下拉过渡

Angular UI Bootstrap dropdown transition

css

angularjs

angular-ui-bootstrap