angularjs - template - ¿Cómo puedo usar ng-animate con ui-view en lugar de ng-view?

otherwise angularjs

Question

Estoy usando angular-ui-router con angularJS v1.2 y me gustaría implementar transiciones de página personalizadas.
¿Cómo puedo usar ng-animate con ui-view (desde angular-ui-router ) en lugar de ng-view (que sería la forma estándar)? Vea Animación remasterizada en AngularJS 1.2 para referencia en ng-view.

EDITAR: He intentado con dos versiones diferentes de angular: v1.2.0-rc.2 y v1.2.0-rc.3, como se sugiere en los comentarios, pero ninguno parece ser el truco. ¿Supongo que podría estar haciendo algo mal?

Aquí está el HTML:

<div ui-view class="slide"></div>

y el CSS:

.slide {
    width:1024px;
    height:768px;
}
.slide.ng-enter,
.slide.ng-leave {
    -webkit-transition:0.5s linear all;
    -moz-transition:0.5s linear all;
    -o-transition:0.5s linear all;
    transition:0.5s linear all;
    border: 1px solid blue;
}

.slide.ng-enter.ng-enter-active {
    border: 1px solid red;
}

JSfiddle un JSfiddle del ejemplo mencionado anteriormente. Sería bueno expandir este ejemplo para cubrir ng-view y ui-view, pero no estoy seguro de cómo obtener ng / ui-view y los parciales en JSfiddle.

Answer 1

Acabo de publicar un tutorial con una demostración en funcionamiento para usar ngAnimate (1.4.8) con UI Router.

Muestra un par de animaciones de vistas diferentes, un fundido de transición en la vista principal y una transición de entrada / salida en una vista anidada.

Aquí hay un fragmento del archivo LESS para el fundido en transición en la vista principal:

main {
    /* start ''enter'' transition */
    &.ng-enter {
        /* transition on enter for .5s */
        transition: .5s;

        /* start with opacity 0 (invisible) */
        opacity: 0;
    }

    /* end ''enter'' transition */
    &.ng-enter-active {
        /* end with opacity 1 (fade in) */
        opacity: 1;
    }
}

Answer 2

Como alguien dijo en la publicación. hay una rama angular 1.2 del enrutador que tiene parches que lo hacen funcionar. Sé con certeza que el uso de Angular 1.2.6 ng-animate 1.2.6 y mi construcción de ui-router especial de 0.2.0 beta branch 1.2 funciona ... desvaneciendo ui-views ... entrando y saliendo.

el problema es que necesitas "construir" el enrutador angular de la rama beta ... no puedes simplemente descargar un tarball de git y funciona ... tienes que descargarlo. luego CONSTRUYE. entonces tendrá un ui-enrutador personalizado. mira el encabezado ui-router en javascript. el mío dice esto ...

/**
 * State-based routing for AngularJS
 * @version v0.2.0-dev-2013-10-05
 * @link http://angular-ui.github.com/
 * @license MIT License, http://www.opensource.org/licenses/MIT
 */

¿dice la versión 0.2.0-dev-2013-10-05? esa fecha es la fecha que compilé la mía. por lo que su fecha debería ser relevante para usted ... si no ve eso en el encabezado de su javascript, entonces solo está usando la misma versión 0.2.0 que el maestro, no está usando nada especial para hacer que 1.2 animaciones funcionen ...

aquí hay un "pastbin" del ui-router compilado que funciona con 1.2, pruébelo. ¡AUGE!

0.2.0 Construcción personalizada de ui-router angular

Answer 3

Durante el fin de semana, creé dos programas que demostraban la visualización de animaciones para ui-view y ng-view

ui-view : http://plnkr.co/edit/jpebBk?p=preview

ng-view : http://plnkr.co/edit/LQhVYU?p=preview

angular-ui-router 0.2.8 viene con correcciones a los principales errores de animación de la vista

Answer 4

El error ya está cerrado y agregaron una entrada en el Wiki ui-router. También incluye una demo Plunkr . Copiaré el ejemplo del código aquí, en caso de que la URL se vuelva obsoleta.

HTML:

<div class="row">
   <div class="span12 ui-view-container">
      <div class="well" ui-view></div>        
   </div>
</div> 

CSS:

/* Have to set height explicity on ui-view 
to prevent collapsing during animation*/
.well[ui-view]{
 height: 65px; 
}

.ui-view-container {
  position: relative;
}

[ui-view].ng-enter, [ui-view].ng-leave {
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

[ui-view].ng-enter {
  opacity: 0;
  -webkit-transform:scale3d(0.5, 0.5, 0.5);
  -moz-transform:scale3d(0.5, 0.5, 0.5);
  transform:scale3d(0.5, 0.5, 0.5);
}

[ui-view].ng-enter-active {
  opacity: 1;
  -webkit-transform:scale3d(1, 1, 1);
  -moz-transform:scale3d(1, 1, 1);
  transform:scale3d(1, 1, 1);
}

[ui-view].ng-leave {
  opacity: 1; 
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
}

[ui-view].ng-leave-active {
  opacity: 0;
  -webkit-transform:translate3d(100px, 0, 0);
  -moz-transform:translate3d(100px, 0, 0);
  transform:translate3d(100px, 0, 0);
}

Answer 5

En caso de que alguien quiera usar animate.css con Angular y angular-ui-router , simplemente podría hacer esto a continuación. Tenga en cuenta que esto solo se probó utilizando Angular 1.2.21 y UI-Router 0.2.10.

Ejemplo de uso de FadeInDown como ingresar animación y FadeOutDown como animación de salida. Simplemente cambie el nombre de la animación por cualquier animación de animate.css. También puede colocarlo en un contenedor div con la posición establecida como relativa.

HTML:

<div data-ui-view class="fade"></div>

CSS:

.fade.ng-enter, .fade.ng-leave {
    position: absolute;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.fade.ng-enter {
   -webkit-animation-name: fadeInDown;
   animation-name: fadeInDown;
}

.fade.ng-leave {
   -webkit-animation-name: fadeOutDown;
   animation-name: fadeOutDown;
}

Otro ejemplo en lugar de usar bounceInDown y bounceOutDown :

HTML:

<div data-ui-view class="bounce"></div>

CSS:

.bounce.ng-enter, .bounce.ng-leave {
    position: absolute;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.bounce.ng-enter {
   -webkit-animation-name: bounceInDown;
   animation-name: bounceInDown;
}

.bounce.ng-leave {
   -webkit-animation-name: bounceOutDown;
   animation-name: bounceOutDown;
}

EDITAR: Hice un tenedor de Plunker de Plunker para visualizar el ejemplo con animate.css.

Answer 6

Parece que esto se solucionó con UI Router 0.2.8. Estoy usando AngularJS v1.2.7.

Por ejemplo, solo agrega la clase "deslizar" a tu vista de usuario

<div ui-view class="slide">

Y usa el siguiente CSS para tu animación.

.slide {
    -webkit-transition: -webkit-transform .7s ease-in-out;
    -moz-transition: -moz-transform .7s ease-in-out;
    -o-transition: -o-transform .7s ease-in-out;
    transition: transform .7s ease-in-out;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.slide.ng-enter {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.slide.ng-enter.ng-enter-active, .slide.ng-leave {
    position: absolute;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.slide.ng-leave.ng-leave-active {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

Además, algunas animaciones parecían tener un comportamiento extraño debido a $ uiViewScroll. Trabajé alrededor agregando autoscroll = "false" a mi elemento ui-view.

Answer 7

Usando AngularMotion https://github.com/mgcrea/angular-motion , solo agrega esto a tu css ...

div[ng-view].ng-leave-active {
    display: none !important;
}

Agregue su animación a la clase ( am-fade en mi caso) de su div ng-view

Answer 8

Evite el nombre de view para view nombre o id para ese elemento .

Por ejemplo, si este es tu html

<div id="home-page" ui-view="home">
  <!-- THIS IS WHERE YOUR TEMPLATE WILL BE LOADED -->
</div>

En lugar de:

/*AVOID*/
div#home-page[ui-view="home"].ng-enter {
    /*ENTER STYLES*/
}
div#home-page[ui-view="home"].ng-enter-active {
    /*...ENTER-ACTIVE-STYLES*/
}

Tratar:

div[ui-view].ng-enter {
    /*...ENTER-STYLES*/
}
div[ui-view].ng-enter-active {
    /*...ENTER-ACTIVE-STYLES*/
}

Buena suerte.