web-dev-qa-db-ja.com

AngularJSアニメーションの完了後にコードを実行する

_ng-show_によって表示が切り替えられる要素があります。また、この要素でCSSアニメーション（ng-animateの自動アニメーション）を使用して、エントリをアニメーション化します。

要素には画像または動画が含まれます。

要素にビデオが含まれている場合、それを再生したいのですが、アニメーションが終了するまでビデオを再生したくありません。

そのため、コールバックを[〜＃〜] css [〜＃〜]アニメーションの最後にバインドする簡単な方法があるかどうか疑問に思っていましたAngularJSで？

docs はdoneCallbackを参照していますが、指定する方法がわかりません...

私が考えていた1つの回避策（？）は_$watch_ ing element.hasClass("ng-hide-add-active")であり、_(true, false)_で起動するのを待って、削除されたことを意味します。

もっと良い方法はありますか？

angularjscss-animationsng-animate
25
Ed Hinchliffe

@ michael-charemzaの回答は私にとってはとてもうまくいきました。 Angular 1.3を使用している場合、彼らは約束を少し変更しました。少しの間これに固執しましたが、それが機能するようになった変更は次のとおりです。

if (show) {
  $animate.removeClass(element, 'ng-hide').then(scope.afterShow);
}
if (!show) {
  $animate.addClass(element, 'ng-hide').then(scope.afterHide);
}

Plunker： コード例

26
Lereveme

@zeroflagLが示唆しているように、ngShowを置き換えるカスタムディレクティブがおそらく道です。 &を使用して、コールバックをディレクティブに渡すことができます。これは、アニメーションの終了後に呼び出すことができます。一貫性を保つため、アニメーションはng-hideクラスを追加および削除することで実行されます。これは、通常のngShowディレクティブで使用されるものと同じメソッドです。

app.directive('myShow', function($animate) {
  return {
    scope: {
      'myShow': '=',
      'afterShow': '&',
      'afterHide': '&'
    },
    link: function(scope, element) {
      scope.$watch('myShow', function(show, oldShow) {
        if (show) {
          $animate.removeClass(element, 'ng-hide', scope.afterShow);
        }
        if (!show) {
          $animate.addClass(element, 'ng-hide', scope.afterHide);
        }
      });
    }
  }
})

スコープ変数showをリッスンするこの使用例は次のとおりです。

<div my-show="show" after-hide="afterHide()" after-show="afterShow()">...</div>

これはng-hideクラスを追加/削除するため、 ngShowに関するドキュメントから をアニメーション化することに関するポイントはまだ有効であり、display: block !importantをCSSに追加する必要があります。

このPlunkerでの実際の動作の例を参照 。

26
Michal Charemza

@ michal-charemzaソリューションはうまく機能しますが、ディレクティブは分離されたスコープを作成するため、場合によってはデフォルトのng-showディレクティブを直接置き換えることはできません。

新しいスコープを作成せず、ng-showディレクティブと交換可能に使用できるように、少し変更しました。

app.directive('myShow', function($animate) {
  return {
    link: function(scope, element, attrs) {
      scope.$watch(attrs['myShow'], function(show, oldShow) {
        if (show) {
          $animate.removeClass(element, 'ng-hide').then(function(){
            scope.$apply(attrs['myAfterShow']);
          });
        } else {
          $animate.addClass(element, 'ng-hide').then(function(){
            scope.$apply(attrs['myAfterHide']);
          });
        }
      });
    }
  }
})

使用法：

<div my-show="show" my-after-hide="afterHide()" my-after-show="afterShow()">...</div>

Plunker

1
m.bemowski