6

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

しかし、ブートストラップやその他のような他の外部ライブラリをロードしないようにしているので、Angular で同じ動作を実現しようとしていました:

$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です。しかし、トランジションエンドでリッスンしている場合、その要素内のトランジションエンドでトリガーされるため、うまく機能しません。

angular だけで折りたたみ可能なブートストラップを書き直すにはどうすればよいですか? shownブートストラップが on 、hiddenまたはshow、のようなイベントは必要ありません。hideトランジションを使用して要素の単純な折りたたみをトリガーし、要素の高さを動的に保つ必要があります(固定の高さは必要ありません。そうでない場合は、単に使用します崩壊を達成するための CSS )。正しい方向に正確に特定する必要があるだけです:)

4

3 に答える 3

7

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;
  }

そして、ここにそれが機能しているプラ​​ンカーがあります。

注意すべき重要な点として、CSS3トランジションはすべてのブラウザーで機能するとは限りません。特にIEで。結局のところ、他の誰かがすでに作成したプラグインを使用し、それをブール値を監視するカスタムディレクティブで利用する方がおそらく良いと思います。

それがお役に立てば幸いです。

編集

height: autoCSSトランジションでは機能しません（少なくともこの投稿の時点では）。したがって、これが、車輪の再発明ではなく、他の誰かのプラグインを本当に使用したい理由です。JQueryのanimate（）メソッドだけでも。独自のディレクティブをローリングするための疑似コードは次のようになります:(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);
     }
   }
});

そして、あなたはそれを次のように使うでしょう：

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

繰り返しになりますが、上記は疑似コードです。それが機能するかどうかはわかりません。本当に自分でロールしたい場合は、従うべきアイデアを提供するだけです。

于 2013-02-15T15:57:04.910 に答える
2

質問を理解していれば、解決策は angular $animateCss を使用することです。ここにドキュメントと例があります https://docs.angularjs.org/api/ngAnimate/service/ $animateCss

$animateCss サービスを使用すると、ngAnimate を使用して独自のアニメーションを作成できます。これは angular モジュールの例です。デモは以下のリンクにあります

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

于 2016-05-31T13:45:25.740 に答える
1

Roland、angular-ui チームのBootstrap Projectを見てください。

于 2013-02-15T18:35:03.297 に答える