Angular UI Bootstrap下拉过渡

Question

这里有Stack Overflow和AngularJS的新秀.我正在尝试在我的下拉列表中添加淡入动画(来自UI Bootstrap的下拉指令),但无济于事.

这与这个问题非常类似: Bootstrap 3下拉过渡 ,但我想知道是否有一个Angular(非jQuery)方式呢？

很高兴在这里问我的第一个问题.

这是我正在使用的代码(从UI Bootstrap的默认Dropdown中提取):

<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>

这里是吸血鬼:http://plnkr.co/edit/CmAZv4DTeda4X0bnkQwQ

Answer 1

更新以处理淡入/淡出过渡.

这是一个纯CSS实现.请记住,旧版浏览器(<IE10)不支持CSS3动画.以下是如何将CSS3动画应用于bootstrap的下拉列表.

当目标属性(或多个属性)更改值时,将执行CSS过渡.这是关于使用它们的MDN文章:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Plunker: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我认为不会更好的东西.