ui-bootstrap中選項卡的淡入淡出效果（Angular.JS）

Question

如何使用angular-ui-bootstrap將淡入淡出動畫添加到tabset？

例如，給出以下代碼：

<tabset>
    <tab heading="Tab1">Some content</tab>
    <tab heading="Tab2">Other content</tab>
</tabset>

我希望標簽的內容在它們之間切換時淡出。 我嘗試將fade類添加到tab標簽（類似於使用bootstrap3 js文件的方式），但它不起作用。

非常感謝！

Answer 1

由於tabset使用ng-class來控制“活動”選項卡，這允許我們通過在移除/附加“活動”類時設置opacity = 0來定義具有角度動畫的淡入淡出效果。

首先，您需要通過包含angular-animate.js並設置依賴項來加載ngAnimate模塊。

添加到<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;
}

就這樣。 您可以在Plunker上查看演示。

另請查看ngAnimate doc 。

Answer 2

我最終修補了ui-bootstrap文件。 我仍然是AngularJS的菜鳥，所以請原諒語言。 這是一個非傳統的黑客攻擊，需要用ng-animate重構，但它有效。

打開ui-bootstrap-tpls-0.10.0.js並查找'tab'指令：

    .directive('tab', ['$parse', function($parse) {
    return {
    require: '^tabset',
    restrict: 'EA',
    replace: true,
    templateUrl: 'template/tabs/tab.html',
    transclude: true,
    scope: {
    id:'@', // PATCH : GETTING TAB 'id' ATTRIBUTE
    heading: '@',
    onSelect: '&select', //This callback is called in contentHeadingTransclude
                      //once it inserts the tab's content into the dom
    onDeselect: '&deselect'
    },
    // ...

注意用於檢索id屬性值的額外代碼（通過翻譯，我猜）。

下面幾行，尋找：

     scope.$watch('active', function(active) {

並修補如下：

          scope.$watch('active', function(active) {
      // Note this watcher also initializes and assigns scope.active to the
      // attrs.active expression.
      setActive(scope.$parent, active);

      if (active) {
        tabsetCtrl.select(scope);
        scope.onSelect();

        tab_id = attrs.id;
        $(".tab_pane_"+tab_id).hide(); // HIDE AT FIRST, SO IT CAN ACTUALLY FADE IN
        $(".tab_pane_"+tab_id).fadeIn(1000); // JQUERY TARGETING BY CLASS

      } else {
        scope.onDeselect();

        tab_id = attrs.id;
        $(".tab_pane_"+tab_id).hide(); // JQUERY TARGETING BY CLASS
      }

    });

下面幾行，尋找：

    scope.select = function() {

並添加內部：

    $(".tab-pane").hide();

所以所有標簽窗格首先都隱藏得很好。

然后，尋找：

angular.module("template/tabs/tabset.html", []).run(["$templateCache", function($templateCache) { ...

並將css類添加到相應模板中的tab-pane元素，如下所示：

angular.module("template/tabs/tabset.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/tabs/tabset.html",
"\n" +
"<div class=\"tabbable\">\n" +
"  <ul class=\"nav {{type && 'nav-' + type}}\" ng-class=\"{'nav-stacked': vertical, 'nav-justified': justified}\" ng-transclude></ul>\n" +
"  <div class=\"tab-content\">\n" +
"    <div class=\"tab-pane tab_pane_{{tab.id}}\" \n" + // CLASS NAME IS DYNAMIC
"         ng-repeat=\"tab in tabs\" \n" +
"         ng-class=\"{active: tab.active}\"\n" + 
"         tab-content-transclude=\"tab\">\n" +
"    </div>\n" +
"  </div>\n" +
"</div>\n" +
"");
}]);

修改ui-bootstrap .js文件后，您必須編輯視圖模板（獲取選項卡的位置）並聲明'id'屬性：

    <!-- TABS -->
    <tabset justified="true">
        <tab ng-repeat="tab in tabs" heading="{{tab.title}}" id="{{tab.id}}" >
            // ... TAB CONTENT

你應該得到基本的概念，目前它不是很優雅（溫和地說）。 但它的確有效。

如果你想知道我的標簽是如何得到id的，那么，我將它們注入我的控制器中：

                        Tab1 = {
                        id:1,
                         'ShortDescription': ShortDescription, 
                         'FullDescription': FullDescription, 
                         'TabContent': TabContent1, 
                        title: "ProductTabTitleDefault1", 
                        // active:true
                    };

                    Tab2 = {
                        id:2,
                         'ShortDescription': ShortDescription, 
                         'FullDescription': FullDescription, 
                         'TabContent': TabContent1, 
                        title: "ProductTabTitleDefault2", 
                        // active:true
                    };


                    $rootScope.tabs = { 
                        'Tab1': Tab1, 
                        'Tab2': Tab2, 
                        };

當然這是模型數據，但假設您的標簽及其內容是動態的，您可以使用計數器，也可以使用另一個鍵而不是“id”（但您必須相應地更改其余部分）。

Answer 3

我有一個替代解決方案@ user3413125上面寫得很好的解決方案。 它使用@keyframes實現交叉漸變，而不是淡出然后淡入。請參閱Plunker上的演示

這是CSS的淡入部分（淡出類似）：

.tab-animation > .tab-content > .tab-pane.active-add {
    animation: 1s fade-in;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

關鍵幀技術取自AngularJs教程14 - 尋找“CSS關鍵幀動畫：動畫ngView”，大約在頁面的一半。

ui-bootstrap中選項卡的淡入淡出效果（Angular.JS）

問題描述

3 個解決方案

解決方案1
28 已采納 2014-09-12 08:32:04

解決方案2
2 2014-03-30 18:35:07

解決方案3
1 2017-05-02 21:42:40

ui-bootstrap中選項卡的淡入淡出效果（Angular.JS）

問題描述

3 個解決方案

解決方案1 28 已采納 2014-09-12 08:32:04

解決方案2 2 2014-03-30 18:35:07

解決方案3 1 2017-05-02 21:42:40

解決方案1
28 已采納 2014-09-12 08:32:04

解決方案2
2 2014-03-30 18:35:07

解決方案3
1 2017-05-02 21:42:40