Angular UI Bootstrap下拉转换

devRookie 发表于 Dev

开发新秀

这里是Stack Overflow和AngularJS的新手总数。我试图在我的下拉菜单中添加淡入动画（通过UI Bootstrap的dropdown指令），但无济于事。

这与以下问题非常相似：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>

这是pl人：http ://plnkr.co/edit/CmAZv4DTeda4X0bnkQwQ

贝内特

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

这是一个纯CSS实现。请记住，较旧的浏览器（<IE10）不支持CSS3动画。以下是如何将CSS3动画应用于bootstrap的下拉菜单。

当目标属性更改值时，将执行CSS转换。这是有关使用它们的MDN文章：https : //developer.mozilla.org/zh-CN/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我认为不会更好的效果。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。