如何使用 angular-ui-bootstrap 将淡入淡出动画添加到标签集中？
例如，给定以下代码:
<tabset>
<tab heading="Tab1">Some content</tab>
<tab heading="Tab2">Other content</tab>
</tabset>
我希望选项卡的内容在它们之间切换时淡出。我尝试将 fade 类添加到 tab 标签(类似于您对 bootstrap3 js 文件的处理方式)，但没有成功。
非常感谢!
最佳答案
自从使用 tabset ng-class控制“事件”选项卡，这允许我们通过在删除/附加“事件”类时设置 opacity=0 来定义带有 Angular 动画的淡入淡出效果。
首先，你需要加载ngAnimate包含 angular-animate.js 的模块并设置依赖。
添加到您的 <head> :
<script src="https://code.angularjs.org/1.2.24/angular-animate.js"></script>
设置模块依赖:
angular.module("myApp", ["ui.bootstrap", "ngAnimate"]);
现在将动画类添加到您的标签集中。
<tabset class="tab-animation">
<tab heading="Tab1">Some content</tab>
<tab heading="Tab2">Other content</tab>
</tabset>
将以下代码放入您的 css 文件中:
/* set reference point */
.tab-animation > .tab-content {
position: relative;
}
/* set animate effect */
.tab-animation > .tab-content > .tab-pane{
transition: 0.2s linear opacity;
}
/* overwrite display: none and remove from document flow */
.tab-animation > .tab-content > .tab-pane.active-remove {
position: absolute;
top: 0;
width: 100%;
display: block;
}
/* opacity=0 when removing "active" class */
.tab-animation > .tab-content > .tab-pane.active-remove-active {
opacity: 0;
}
/* opacity=0 when adding "active" class */
.tab-animation > .tab-content > .tab-pane.active-add {
opacity: 0;
}
就是这样。您可以查看 demo on Plunker .
另请查看 ngAnimate doc .
关于javascript - ui-bootstrap(Angular.JS)中选项卡的淡入淡出效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19503321/