25

によって可視性が切り替えられる要素がありng-showます。また、この要素で CSS アニメーション (ng-animate の自動アニメーション) を使用して、そのエントリをアニメーション化しています。

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

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

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

ドキュメントはadoneCallbackを参照していますが、それを指定する方法がわかりません...

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

より良い方法はありますか？

4

3 に答える 3

26

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

プランカー:コード例

于 2014-10-30T14:53:01.487 に答える
26

@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 で、この例を実際に見ることができます。

于 2014-01-04T22:01:53.670 に答える
1

@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>

プランカー

于 2017-01-16T07:32:06.457 に答える