这里是 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>
最佳答案
更新以处理淡入/淡出过渡。
这是一个纯 CSS 实现。请记住,旧版浏览器 (< IE10) 不支持 CSS3 动画。以下是如何将 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
属性将保持相同的效果。我有另一个没有可见性
的工作示例;但是,它要求您维护 z-index
,我认为这不会更好。
关于css - Angular UI Bootstrap 下拉菜单转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27994333/