Ng-анимация с директивой ng-класса

Вы можете использовать ng-animate с ng-классом с добавлением и удалением анимаций. Я хочу сделать одну анимацию в CSS3, но не нашел хороших примеров с ng-классом в Интернете. Поэтому мне было интересно, есть ли у людей хорошие примеры, которые они хотят поделиться.

Я не уверен, как будет выглядеть моя финальная анимация, но для целей этого примера позвольте сказать, что я просто хочу, чтобы высота div постепенно увеличивалась, когда я добавляю класс myclass.

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

**CSS**

.myclass.ng-add{??}
.myclass.ng-add-active{??}
.myclass.ng-remove{??}
.myclass.ng-remove-active{??}

Ответы

Ответ 1

Анимация добавления или удаления ng-class с использованием перехода CSS имеет 3 этапа. Порядок этих этапов очень важен, Я почти провел день, выясняя, почему простая анимация не работала из-за неправильного понимания порядка, в котором добавлены классы.

Этап 1:

Добавлен класс

classname-add/ classname-remove.

В отличие от того, что кто-то может подумать, на самом деле это добавлено до, класс добавляется/удаляется из элемента.

Это этап, на котором мы должны добавить свойство transition 1 а также начальное состояние нашей анимации.

Этап 2:

classname добавлен или удален класс.

Здесь вы указываете возможные стили элемента. Этот класс часто не имеет ничего общего с нашей анимацией. Помните, что мы оживляем добавление/удаление этого класса. Этот класс сам по себе даже не должен знать, что вокруг него происходит анимация.

Этап 3:

Добавлен класс

classname-add-active/ classname-remove-active.

Это добавлено после, класс добавляется/удаляется из элемента.

Это этап, на котором мы должны указать конечное состояние нашей анимации.

Чтобы увидеть это в действии, создайте классическую анимацию fade-in-out, показанную при изменении выбранного элемента (selected изменение класса с помощью ng-класса).

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>

Ответ 2

Я нашел решение этой проблемы, поэтому я решил поделиться ею.

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

Что приятно в этом, так это то, что для этого требуется только два класса CSS. Вы можете напрямую вставить свойство CSS3 transition в свой базовый класс. В отличие от других случаев ng-animate, я считаю, что все анимации выполняются в CSS3 (не возиться с DOM, как с анимациями с ng-include и т.д.).

Я хочу поблагодарить Илан Фрумер за ссылку на его ответ. Его решение было для анимации с ng-show, которая очень похожа, но немного отличается от анимации с ng-классом. Поэтому я решил опубликовать свой пример.