javascript - example - cómo usar animación con ng-repeat en angularjs
ng-repeat select (4)
Tengo una lista que repito usando ng-repeat: y el usuario puede interactuar con los ítems de la lista usando íconos de flecha arriba y flecha abajo y al hacer clic en ellos simplemente cambio el orden del elemento en la "lista". "Esto es lo que angular sugiere cambiar el modelo y los cambios se reflejan automáticamente en la vista.
<div ng-repeat="item in list">
{{item.name}}
<div class="icon-up-arrow" ng-click="moveUp($index);"></div>
<div class="icon-down-arrow" ng-click="moveDown($index);"></div>
</div>
Lógica en moveUp: -
$scope.moveUp= function(position){
var temp=list[position-1];
list[position-1]=list[position];
list[position=temp];
};
el código anterior funciona completamente bien y similar es la lógica para desplazar el elemento hacia abajo. Pero el problema que quiero resolver es ¿cómo pongo la animación? Sé que angular se ocupa de la vista y el modelo de enlace por sí mismo, pero ¿hay alguna forma de poner la animación a medida que se actualiza la vista al presionar los íconos de flecha hacia abajo?
Complementando la última respuesta, existe la clase ng-move para animaciones cuando se cambia la orden:
li {
opacity: 1;
}
li.ng-move {
-webkit-transition: 1s;
transition: 1s;
opacity: 0;
}
li.ng-move-active {
opacity: 1;
}
Última documentación aquí .
Mira este enlace http://www.nganimate.org/
Debe declarar el atributo ng-animate a un elemento que tenga otra directiva que cambie el DOM
div ng-repeat="item in itens" ng-animate="{enter: ''animate-enter'', leave: ''animate-leave''}"
Necesita agregar transiciones CSS o animación.
.animate-enter { -webkit-transition: 1s linear all; /* Chrome */ transition: 1s linear all; opacity: 0; } .animate-enter.animate-enter-active { opacity: 1; }
Puede consultar el ejemplo de plnkr aquí: http://plnkr.co/edit/VfWsyg9d7xROoiW9HHRM
Si no desea utilizar el módulo ''ngAnimate'' porque reduce el número de complementos, puede archivar el efecto de transición simple usando ng-init y directivas personalizadas.
<li ng-repeat="item in items" class="item" item-init>{{item.name}}</li>
.item{
opacity:0;
-webkit-transition: all linear 300ms;
transition: all linear 300ms;
}
.item.visible{
opacity:1;
}
myApp.directive(''itemInit'', function ($compile) {
return function (scope, element, attrs) {
scope.initItem(element);
};
});
En tu controlador
$scope.initItem = function(el){
$timeout(function(){
angular.element(el).addClass(''visible'');
},0);
}
Siguiendo con el comentario de Marcel: en AngularJS 1.2 no necesitas usar la directiva ng-animate
. En lugar:
- Incluir
angular-animate[-min].js
. - Haga que su módulo dependa de
ngAnimate
. - Define tus transiciones en CSS usando clases como
.ng-enter
y.ng-enter-active
. - Use
ng-repeat
como lo haría normalmente.
HTML:
<div ng-app="foo">
<!-- Set up controllers etc, and then: -->
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
JavaScript:
angular.module(''foo'', [''ngAnimate'']);
// controllers not shown
CSS:
li {
opacity: 1;
}
li.ng-enter {
-webkit-transition: 1s;
transition: 1s;
opacity: 0;
}
li.ng-enter-active {
opacity: 1;
}
Demostración en (otro) Plunker .
Consulte los documentos de $ animate para obtener detalles sobre la progresión a través de las diversas clases de CSS.