ブートストラップのようなものが折りたたまれて角度がついています

Question

私は小さなアプリケーションを構築しています。私はAngularJSを使用しています。アプリ内で折りたたみ可能な要素が必要で、Twitter Bootstrapを使用することは、ライブラリとタグをターゲット要素とトリガに追加するのと同じくらい簡単です。

しかし、私は、ブートストラップまたはその他のような他の外部ライブラリをロードしないようにしようとしているので、私は角度と同じ動作を達成しようとしていた：あなたは私が移行しようとしている見ることができるように

$scope.collapse = function(target) { 

     var that = angular.element(document).find(target), 

      transitioned = { 
       'WebkitTransition' : 'webkitTransitionEnd', 
       'MozTransition' : 'transitionend', 
       'OTransition'  : 'oTransitionEnd otransitionend', 
       'msTransition'  : 'MSTransitionEnd', 
       'transition'  : 'transitionend' 
      }, 

      _transitioned = transitioned[ Modernizr.prefixed('transition') ], 

      height = that.outerHeight(true); 

     if (angular.element(that).hasClass("in")) { 
      that.height(0); 
     } else { 
      that.height(height); 
     }; 

     that.on(_transitioned, function() { 
      that.toggleClass("in"); 
     }); 
    }; 

を高さ（要素が高さに遷移を持つため）、最後にクラスinを追加します。しかし、それは非常にうまくいっていません。なぜなら、私がトランジションエンドで聞いていると、そのエレメント内のトランジションエンドでトリガーされるからです。

私はこれについていくつかの助けを必要としますが、どのように角度だけでブートストラップ折りたたみを書き直すことができますか？私はブートストラップのようなイベントは必要ありませんshown、hiddenまたはshow、hide、私はちょうどトランジションの要素の単純な崩壊をトリガし、私の要素の高さを動的に維持する必要があります（私は、私はちょうど崩壊を達成するためにCSSを使用するだろう）。私はちょうど正しい方向に正確に指摘する必要があります:)

Answer 1

あなたはCSS3トランジションで何かを崩壊したいのですか？

さて、これを行うことはできますが、コントローラーは間違った場所です。ディレクティブやカスタムディレクティブで行う必要があります。幸運なことに、ng-classなどのAngularネイティブディレクティブで行うことができます。

HTML：

<button ng-click="open = !open">Toggle</button>  
<div ng-class="{ showMe: open }" class="collapsable"> 
    <h3>This should collapse</h3> 
</div> 

そして、最も重要なのは、あなたのCSS：

に注意することが重要

.collapsable { 
    display: inline-block; 
    overflow: hidden; 
    height: 0; 
    transition: height 1s; 
    -webkit-transition: height 1s;   
    -moz-transition: height 1s;   
    -o-transition: height 1s;   
    } 
    .collapsable.showMe { 
    height: 100px; 
    } 

And here is a plunker of it working.

、CSS3遷移はすべてのブラウザでは動作しません。特にIEでは。結局は、他の誰かがすでに作ったプラグインを使って、それからブール値を見たカスタムディレクティブでそれを活用するほうが良いと思います。

私は役立つことを願っています。

---

EDIT

height: autoは（少なくともこの記事の時点での）CSSトランジションでは動作しません。だからこそ、これは車輪を再構築するのではなく、誰かのプラグインを本当に使いたいと思う理由です。たとえそれがJQueryのanimate（）メソッドであったとしても。 、

<button ng-click="foo = !foo">Toggle</button> 
<div collapse-when="foo"> 

再び：自分のディレクティブを転がすための擬似コードは、それほどのようになります。（あなたはjQueryのを使用している仮定）

app.directive('collapseWhen', function() { 
    return function(scope, elem, attr) { 
    scope.$watch(attr.collapseWhen, function(val) { 
     var clone = elem.clone().appendTo('body'); 
     var h = clone.height(); 
     clone.remove(); 
     scope.animate({ height: (val ? h : 0) + 'px' }, 1000); 
    } 
    } 
}); 

をして、あなたはそれが好きで使用したいです上記は擬似コードですが、それがうまくいくかどうかはわかりません。本当にあなた自身をロールしたい場合、あなたに従うというアイデアを伝えるだけです。

Answer 2

Rolandは、angle-uiチームのBootstrap Projectをご覧ください。

Answer 3

質問が分かりましたら、私の解決策はangular $ animateCssです。ここにドキュメントと例がありますhttps://docs.angularjs.org/api/ngAnimate/service/ $ animateCss

$ animateCssサービスでは、ngAnimateを使用して独自のアニメーションを作成することができます。これは角度モジュールの例です。 ; 100pxに：私は私の説明で述べたようにデモは `collapsable.showMe {高さ、

var AppModule = angular.module('myApp', ['ngAnimate']) 
    .controller('collapseCtrl', ['$scope', function($scope) { 
    $scope.btn1 = $scope.btn2 = $scope.btn3 = false; 
    }]).animation('.my-collapse', ['$animateCss', function($animateCss) { 
    return { 
     enter: function(element, doneFn) { 
     var height = element[0].offsetHeight; 
     return $animateCss(element, { 
      from: { 
      height: '0px', 
      overflow: 'hidden' 
      }, 
      to: { 
      height: height + 'px' 
      }, 
      cleanupStyles: true, 
      duration: 0.3 // one second 
     }); 
     }, 
     leave: function(element, doneFn) { 
     var height = element[0].offsetHeight; 
     return $animateCss(element, { 
      to: { 
      height: '0px', 
      overflow: 'hidden' 
      }, 
      from: { 
      height: height + 'px' 
      }, 
      cleanupStyles: true, 
      duration: 0.3 // one second 
     }); 
     } 
    }; 
    }]); 

https://plnkr.co/edit/DjU1A2vmiBB1dYXjkiN1