for example javascript angularjs jquery-animate angularjs-ng-repeat

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/

  1. 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''}"

  2. 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:

  1. Incluir angular-animate[-min].js .
  2. Haga que su módulo dependa de ngAnimate .
  3. Define tus transiciones en CSS usando clases como .ng-enter y .ng-enter-active .
  4. 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.