que - AngularJS 1.2-ngAnimate no funciona

ocultar div angularjs

Question

Soy nuevo en usar ng-animate con AngularJS 1.2. No estoy seguro de por qué mi ng-animate no funciona con un determinado nombre de clase, pero funciona con el valor predeterminado para un fundido simple que vi en un ejemplo.

En este ejemplo, trato de configurar mi clase ng-animate para que sea ''animación'': http://plnkr.co/edit/QWQUUVdcLmzLKRvVibqN?p=preview

pero cuando uso el valor predeterminado, y mi nombre de clase para animaciones es simplemente ".ng-enter" y ".ng-leave", el fundido en la animación parece funcionar bien.

http://plnkr.co/edit/lEQhMwd6RWmsdmJbosu0?p=preview

¡Cualquier ayuda sería muy apreciada, gracias!

Answer 1

Como Tasse dijo que ng-animate está en desuso, necesitamos usar la clase. Si está copiando CSS del sitio web de angularjs http://www.nganimate.org/angularjs/ng-repeat/move entonces necesita modificar esos CSS en un formato particular

Para ver el detalle completo, aplique la animación Angularjs en 2 minutos

Answer 2

Debe verificar que la versión de su angular.min.js coincida con la versión de angular-animate.min.js.
Tengo el mío arreglado de esta manera.

Answer 3

El atributo ng-animate está en desuso en 1.2.

En 1.2 se definen las clases de CSS apropiadas utilizando una convención de nomenclatura especial. Si desea un nombre específico como ''animación'', debe agregar esa clase al elemento que desea animar.

Mientras tenga las clases de CSS correctas, algunas directivas se animarán automáticamente. Cuáles se pueden encontrar aquí: http://docs.angularjs.org/api/ngAnimate

Esta es la razón por la que su animación funciona en su segundo ejemplo cuando solo define la clase ".ng-enter". Sin embargo, esto animaría automáticamente todas las directivas que admiten la animación enter.

He actualizado tu primer ejemplo para que funcione con la clase llamada ''animación'':

HTML:

<li ng-repeat="item in items" class="animation">{{item}}</li>

CSS ( Mantener los selectores desagrupados para mayor claridad ):

.animation {
  -webkit-transition: 1s;
}

.animation.ng-enter {
  opacity: 0;
}

.animation.ng-leave {
  opacity: 1;
}

.animation.ng-enter.ng-enter-active {
  opacity: 1;
}

.animation.ng-leave.ng-leave-active {
  opacity: 0;
}

Plunker: http://plnkr.co/edit/J0qJEMmwdzqXzu733fJf?p=preview

Answer 4

Esto se suma a la respuesta aceptada, para aquellos que intentan animar un elemento con la directiva ng-show . Estos son estilos que deben ser utilizados:

.animation.ng-hide-remove {
  transition:2s linear all;
  opacity:0;
}

.animation.ng-hide-remove.ng-hide-remove-active {
  opacity:1;
}

Tenga en cuenta que no todas las directivas angulares agregan ng-enter, ng-enter-active, ng-leave and ng-leave-active . Por ejemplo, la directiva ng-show agrega ng-hide-remove al comienzo de la animación y ng-hide-remove-active al final de la misma. Para obtener más detalles, siga este enlace: https://www.w3schools.com/angular/angular_animations.asp

Answer 5

También es importante recordar agregar el módulo de animación como una dependencia a su definición de módulo. En caso de que alguien más tenga problemas para hacer funcionar las animaciones y no lo haya hecho.

angular.module(''myApp'', [''ngAnimate'']);