animation - AngularJs - 何かの幅だけをアニメーション化する方法は?

Question

新しいアニメーション サポートを使用して、Angular で何かの幅だけをアニメーション化する方法の良い例は見つかりませんでした。

ユーザーがボタンを押したときに展開/閉じたいアプリの横に引き出しがあります。問題は、ng-show では、「離れる」アニメーションが完了した後に常に「display: none」を適用したいということです。これは望ましくありません。引き出しの幅をアニメートしたいだけです。

これを達成するための最良の方法は何ですか？

Answer 1

jquery アニメーションを使用して要素の幅を変更する独自のディレクティブを作成できます。

angular.module('app', []).directive('testAnimate', function() {

  return {
    link: function(scope, iElement, iAttrs) {
      scope.$watch(iAttrs.testAnimate, function(newValue, oldValue) {
        var shown = !!newValue;

        if (shown !== !!oldValue) {
          iElement.animate({
            width: shown ? '+=50px' : '-=50px'
          });
        }
      });
    }
  };

});

ライブデモ: http://plnkr.co/edit/Il0fq0nlWKckpilWFXC6?p=preview