【问题标题】:Angular UI Bootstrap dropdown transitionAngular UI Bootstrap 下拉转换
【发布时间】:2015-01-20 03:59:36
【问题描述】:

这里是 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

【问题讨论】:

标签: css angularjs angular-ui-bootstrap


【解决方案1】:

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

这是一个纯 CSS 实现。请记住,旧版浏览器 (

当目标属性(或多个属性)更改值时执行 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,我认为这不会更好。

【讨论】:

  • 效果很好。感谢您抽出宝贵时间!
  • 刚刚尝试实现相反的效果,使其淡出(尝试将“淡出”应用于 .dropdown-menu),但我想它不会那样工作吧。
  • 使用另一种方法,它并不那么简单。由于您想要淡入淡出,我将答案更改为使用 CSS 过渡而不是 CSS 动画。 IMO 更清洁。
  • 这很有魅力!非常感谢您解释其背后的机制。
  • 在菜单隐藏动画期间,菜单向右移动了一点。我必须添加.show &gt; .dropdown-menu { margin-right: -2px; }
猜你喜欢
  • 2020-09-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-02-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多