uri*_*ish 15 javascript angularjs angular-ui-bootstrap twitter-bootstrap-3
如何使用angular-ui-bootstrap将淡入淡出动画添加到tabset？
例如,给出以下代码:
<tabset>
<tab heading="Tab1">Some content</tab>
<tab heading="Tab2">Other content</tab>
</tabset>
我希望标签的内容在它们之间切换时淡出.我试图将fade类添加到tab标记(类似于使用bootstrap3 js文件的方式),但它不起作用.
非常感谢!
小智 30
由于tabset用于ng-class控制"活动"选项卡,这允许我们通过在移除/附加"活动"类时设置opacity = 0来定义具有角度动画的淡入淡出效果.
首先,您需要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.
<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;
}
另请查看ngAnimate doc.