web-dev-qa-db-ja.com

ng-animateとng-classディレクティブ

Ng-animateをng-classとともに使用して、アニメーションを追加および削除できます。 CSS3で1つのアニメーションを作成したいと思っていますが、ng-class onlineで良い例を見つけていません。だから、人々が共有したい良い例があるのか​​と思っていました。

最終的なアニメーションがどのようになるかはわかりませんが、この例では、クラスmyclassを追加するときにdivの高さを徐々に増やしたいとしましょう。

 <div ng-class="{{myclass:scopeVar}}" ng-animate="?????"></div>

**CSS**

.myclass.ng-add{??}
.myclass.ng-add-active{??}
.myclass.ng-remove{??}
.myclass.ng-remove-active{??}
cssangularjsanimationng-animateng-class
22
NicolasMoise

CSSトランジションを使用してng-classを追加または削除するアニメーションには、3つの段階があります。これらのステージの順序は非常に重要です 単純なアニメーションが機能しない理由を理解するのに1日を費やしました クラスが追加される順序が正しく理解されていないためです。

ステージ1：

classname-add/classname-removeクラスが追加されました。

誰かが思うかもしれないこととは異なり、これは実際に追加されますbeforeクラスが要素に追加/要素から削除されます。

これは、transitionプロパティを追加する段階です 1 アニメーションの初期状態だけでなく.

ステージ2：

classnameクラスが追加または削除されました。

ここで、要素の最終的なスタイルを指定します。多くの場合、このクラスはアニメーションとは関係ありません。このクラスの追加/削除をアニメーション化していることを思い出してください。このクラス自体は、その周りでアニメーションが発生していることを認識する必要さえありません。

ステージ3：

classname-add-active/classname-remove-activeクラスが追加されました。

これは、クラスが要素に追加/要素から削除された後後に追加されます。

これは、アニメーションの最終状態を指定する段階です。

この動作を確認するために、要素の選択状態が変化したときに表示される古典的なフェードインアウトアニメーションを作成してみましょう（ng-classを使用してselectedクラスが変化）。

angular.module('demo', ['ngAnimate'])
  .controller('demoCtrl', function($scope) {
    $scope.selected = false;
    $scope.selectToggle = function() {
      $scope.selected = !$scope.selected;
    };
  });
.item {
  width: 50px;
  height: 50px;
  background: grey;
}
.item.selected {
  /* this is the actual change to the elment
   *  which has nothing to do with the animation
   */
  background-color: dodgerblue;
}
.item.selected-add,
.item.selected-remove {
  /* Here we specify the transition property and
   * initial state of the animation, which is hidden 
   * state having 0 opacity
   */
  opacity: 0;
  transition: opacity 3s;
}
.item.selected-add-active,
.item.selected-remove-active {
  /* Here we specify the final state of the animation,
   * which is visible having 1 opacity
   */
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.js"></script>
<div ng-app="demo" ng-controller="demoCtrl">
  <div class="item" ng-class="{selected:selected}"></div>
  <br>
  <br>
  <button ng-click="selectToggle();">
    {{selected? 'Unselect' : 'Select'}}
  </button>
</div>

1 切り替えられるクラスや要素の静的セレクターにトランジションを追加するのではなく、最初の状態でトランジションを指定する必要があるのはなぜですか？.

これを説明するために、たとえば、fade-outクラスが追加されたときのフェードアウトアニメーションなど、一方向のアニメーションが必要であると想定します。

fade-outクラス自体にtransitionプロパティを追加すると、アニメーション後もトランジションは要素に留まります。つまり、最終状態（fade-out-add-active）が削除されると、要素はゆっくりとフェードインして戻りますので、フェードを取得します-out-fade-inは、私たちが望んでいたものではありません。

27
T J

この問題の解決策を見つけたので、共有したいと思いました。

http://jsfiddle.net/nicolasmoise/XaL9r/1/

これの良い点は、2つのCSSクラスしか必要としないことです。 CSS3 transitionプロパティを基本クラスに直接挿入できます。他のng-animateの場合とは異なり、すべてのアニメーションはCSS3で行われると思います（ng-includeなどのアニメーションのようにDOMをいじる必要はありません）。

彼の回答へのリンクについて Ilan Frumer に感謝します。彼の解決策は、ng-showを使用したアニメーション用でした。これは、非常によく似ていますが、ng-classを使用したアニメーションとは少し異なります。したがって、私が自分の例を投稿することに決めた理由。

14
NicolasMoise