ui-bootstrap中標籤的淡入淡出效果（Angular.JS）

如何使用angular-ui-bootstrap將淡入淡出動畫添加到標籤集？ui-bootstrap中標籤的淡入淡出效果（Angular.JS）

例如，給定下面的代碼：

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

我想的選項卡的內容在它們之間切換時褪色。我試圖將fade類添加到tab標記（類似於您將如何使用bootstrap3 js文件），但它不起作用。

非常感謝！

來源

2013-10-21 urish

嘗試閱讀$ animate的文檔 - 也許它會給你一些想法。 – lort

我會......我希望有一些我忽略的快速解決方案，就像bootstrap3 js一樣，這很容易做到 – urish

由於tabset使用ng-class來控制「活動」選項卡，該選項卡允許我們在刪除/附加「活動」類時通過設置不透明度= 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 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。

來源

2014-09-12 08:32:04 user3413125

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

開放UI的自舉TPLS-0.10.0.js並查找 '選項卡' 指令：

.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中的額外的代碼屬性值（通過transclusion，我猜）。

下面幾行，尋找：

 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類添加到選項卡窗格元素在相應的模板，比如：

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」（但你必須相應地改變其餘的）。

來源

2014-03-30 18:35:07

非常好的答案。很容易遵循，它實際上工作 –

混合jQuery到角度項目不是最好的方式去了解它。 –

我有一個替代解決方案@ user3413125上面寫得很好的解決方案。它使用@keyframes以實現交叉衰減，而不是出於隨後在淡入淡入參見demo on Plunker

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

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

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

關鍵幀技術取自AngularJs tutorial 14 - 在頁面的一半處查找「CSS關鍵幀動畫：動畫ngView」。

來源

2017-05-02 21:42:40

ui-bootstrap中標籤的淡入淡出效果（Angular.JS）

回答

相關問題