angle-ui-bootstrapを使用してタブセットにフェードアニメーションを追加するにはどうすればよいですか？私はそれらの間の切り替え時フェードするタブの内容を希望ui-bootstrap（Angular.JS）のタブのフェード効果
<tabset>
<tab heading="Tab1">Some content</tab>
<tab heading="Tab2">Other content</tab>
</tabset>
：例えば
は、次のコードを与え。私はtabタグにfadeクラスを追加しようとしましたが（bootstrap3 jsファイルと同じように）、動作しませんでした。
多くの感謝！
「アクティブ」タブを制御するためにタブセットを使用しているため、「アクティブ」クラスが削除/添付されたときに不透明度= 0に設定することで角度アニメーションのフェード効果を定義できます。
まず、ngAnimateモジュールを読み込み、angular-animate.jsを含めて依存関係を設定する必要があります。
あなた<head>に入れる：
angular.module("myApp", ["ui.bootstrap", "ngAnimate"]);
今すぐあなたのタブセットにアニメーションクラスを追加します。モジュールの依存関係が
<script src="https://code.angularjs.org/1.2.24/angular-animate.js"></script>
セット。
<tabset class="tab-animation">
<tab heading="Tab1">Some content</tab>
<tab heading="Tab2">Other content</tab>
</tabset>
CSSファイルにコードを次のPut：
/* 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もご覧ください。
私はui-bootstrapファイルにパッチを当てました。 私はまだAngularJSのノブですので、ごめんなさい。 これは従来にないハックであり、ng-animateでリファクタリングする必要がありますが、機能します。
オープンUI-ブートストラップ・TPLS-0.10.0.jsと「タブ」ディレクティブを探します。idを取得するための余分なコードは、トランスクルーを経て、私は推測する（属性値を
.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'
},
// ...
お知らせ）。
以下の数行は、探し：
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
}
});
数行、見てfor：
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"の代わりに別のキーを使用することもできます（ただし、それに応じて残りの部分を変更する必要があります）。
非常に良い答えです。単純に従うとそれは実際に働く –
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 Keyframe Animations：ngViewをアニメーション化する」を検索し、ページの半分を表示します。
$ animateのドキュメントを読んでみてください。おそらくそれはあなたにいくつかのアイデアを与えるでしょう。 – lort
私は... bootstrap3 jsと同じように簡単に解決できる解決策がほしいと思っています。 – urish