Скажите ngAnimate только для анимации ngShow/ngHide

У меня есть веб-приложение AngularJS 1.2.2 с <div>, которое я показываю/скрываю на основе некоторого свойства $scope. Используя модуль ngAnimate, я анимацию показываю и скрываю <div>.

<div id="square" ng-show="showSquare" class="animate-shiny"></div>

У меня также есть класс, который я хочу разместить на этом <div>, и для этого я использую ngClass.

<div id="square" ng-show="showSquare" class="animate-shiny" ng-class="{ cool: extraCool }"></div>

И как это бывает, иногда этот класс применяется в тот же момент, когда отображается <div>. Это приводит к тому, что анимация show/hide больше не работает, при этом она находит ngClass более интересным для анимации, хотя я не хочу использовать ngAnimate для этой анимации.

Здесь показан Plnkr, демонстрирующий поведение. Щелчок по кнопке show/hide отлично работает, нажатие кнопки make cool отлично работает, но кнопка, которая объединяет эти две причины, разбивает анимацию show/hide.

Как это исправить? И могу ли я сделать это без ручной адресации $animate?

Спасибо заранее!

Ответы

Ответ 1

Проблема заключается в том, что вы пытаетесь анимировать использование класса и не различать, когда нужно оживлять вещи. То есть ваш эффект перехода применяется к классу в целом, который ng-animate воспринимает как необходимость выполнять работу всякий раз, когда на этот класс ссылаются. Я немного изменил ваш css, чтобы получить довольно близко, если не совсем, что вы хотите:

#square {
  width: 50px;
  height: 50px;
  background-color: blue;
  transition: 0.4s all ease-out;
}

#square.cool {
  box-shadow: 0 0 10px 3px green;
  background-color: lightgreen;
}

#square.ng-hide-add, #square.ng-hide-remove
{
  display: block !important; 
}

#square.ng-hide-remove, #square.ng-hide-add.ng-hide-add-active{
  margin-left: -80px;
    opacity: 0;
}

#square.ng-hide-remove.ng-hide-remove-active, #square.ng-hide-add{
  margin-left: 0;
    opacity: 1;
}

Вот новый plunkr, чтобы вы могли играть с ним: http://plnkr.co/edit/a7wiZfCrEGCXfIDSvF9r?p=preview

Если вы хотите ТОЛЬКО оживить шоу/скрыть и не хотите перехода для цвета, просто переместите переход к объявлению #square.ng-hide-add, #square.ng-hide-remove.