entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Animacion cada itineracion ng-repeat AngularJS

Buenas tardes, esto me esta haciendo perder toda la mañana, lo que quiero conseguir es que se ejecute una animación cada vez que ocurra el ng-repeat para que los bloques que genero aparezcan poco a poco, pero no se porque no funciona.
Ahora mismo esta funcionando asi:
http://recordit.co/nZRpaebWzm

Este es el html:

<div class="blocks-container" ng-init="loadProjects()" ng-controller="buildMonitorController">
<div class="row">
    <div>
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 block" ng-repeat="build in builds.builds.build | orderBy:'lastBuildDetails.startDate' : true" ng-animate="{enter: 'block-enter'}" style="transition-delay:500ms" ng-class="{'running': project.running ,'block-green': build._status ==='SUCCESS','block-red': build._status==='FAILURE'}" id="{{build._id}}">
                <div class="title-container"><p>{{build._buildTypeId}}</p></div>
                <div class="update-container col-xs-12">
                <time>{{ build.lastBuildDetails.startDate | date : 'dd.MM.yyyy H:mm:s'}}</time>
                </div>
            </div>
        </div>
    </div>

Estas son las reglas css:

    .block-enter {
    opacity:0;
    -webkit-transition-property: all;
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 400ms;
}
.block-enter.block-enter-active {
    opacity: 1;
}

1 Respuesta

3votos

cloudman Puntos4020

Buenas tardes Negimaru.

En este enlace tienes animaciones, y puedes ver en Plunker el tratamiento que hace del css y del html.
Creo que así vas a ir a tiro fijo, y vas a poder elegir alguna animación que te guste rápidamente.

Ya nos contarás.

http://www.nganimate.org/angularjs/ng-repeat

Un saludo.

0voto

Negimaru comentado

Nada, no consigo que funcione ni copiando las del plunker, ignora las animaciones completamente.

0voto

cloudman comentado

¿Que versión de angular estás utilizando?. Asegúrate que sea superior o como mínimo la 1.1.5, si eso es correcto seguimos mirando otras cosas o hago yo una prueba con un proyecto que tengo por aquí a ver...

Un saludo.

0voto

Negimaru comentado

Ya he conseguido que funcione, muchas gracias, tenia la ultima version la 1.3.15, la he vuelto a bajar por si acaso y ahora funciona(no entiendo muy bien el porque, pero me vale).

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta