css3 - ngclass - ng-style

ng-animate con la directiva ng-class

Question

Puede usar ng-animate con ng-class con las animaciones para agregar y eliminar. Estoy buscando hacer una animación en CSS3 pero no he encontrado buenos ejemplos con ng-class en línea. Así que me preguntaba si las personas tienen buenos ejemplos que quieren compartir.

No estoy seguro de cómo será mi animación final, pero para el propósito de este ejemplo, digamos que solo quiero hacer que la altura del div aumente gradualmente cuando agrego la clase myclass .

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

**CSS**

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

Answer 1

Animar una adición o eliminación de ng-class utilizando la transición CSS tiene 3 etapas. El orden de estas etapas es muy importante, casi pasé un día descubriendo por qué una animación simple no funcionaba debido a una comprensión incorrecta del orden en que se agregan las clases.

Nivel 1:

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

A diferencia de lo que alguien podría pensar, esto se agrega en realidad antes de que la clase se agregue / elimine del elemento.

Esta es la etapa en la que debemos agregar la propiedad de transition ¹ , así como el estado inicial de nuestra animación.

Etapa 2:

classname clase se agrega o elimina.

Aquí es donde se especifican los estilos eventuales del elemento. Esta clase a menudo no tiene nada que ver con nuestra animación. Recuerde que estamos animando la adición / eliminación de esta clase. Esta clase en sí misma no debería tener que estar consciente de que hay una animación que tiene lugar a su alrededor.

Etapa 3:

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

Esto se agrega después de que la clase se agrega / elimina del elemento.

Esta es la etapa en la que debemos especificar el estado final de nuestra animación.

Para ver esto en acción, vamos a crear una animación de atenuación de entrada clásica que se muestra cuando cambia el estado seleccionado de un elemento (la clase selected cambia usando ng-class).

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>

¹ ¿Por qué debo especificar la transición en el primer estado, en lugar de simplemente agregarla a la clase que se está alternando o un selector estático en el elemento ?, pregunta.

Bueno, para explicar esto, suponga que necesita una animación unidireccional, por ejemplo, una animación de desaparición gradual cuando se agrega fade-out clase de fade-out .

Si agrega transition propiedad de transition en la propia clase de desaparición, la transición permanece en el elemento incluso después de la animación. Lo que significa que cuando se elimine su estado final (fade-out-add-active), el elemento se desvanecerá lentamente , por lo que obtendremos un fade-out-fade-out-in que no es lo que queríamos.

• Resultado no deseado

• Resultado deseado

Answer 2

He encontrado una solución a este problema, así que pensé en compartirlo.

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

Lo bueno de este es que solo requiere dos clases de CSS. Puede insertar directamente la propiedad de transition CSS3 en su clase base. A diferencia de otros casos de ng-animate, creo que todas las animaciones se realizan en CSS3 (no se meten con el DOM como con las animaciones con ng-include, etc ...).

Quiero agradecer a Ilan Frumer por el enlace a su respuesta. Su solución fue para la animación con ng-show que es muy similar pero un poco diferente de las animaciones con ng-class. Por eso decidí publicar mi ejemplo.