Tengo 2 páginas html, welcome.html y login.html ambos de los cuales se «inserta» en index.html dependending en la dirección URL a través de un ngview atributo y el router del proveedor de, como parte de mi AngularJS aplicación.

Un ejemplo de esto se puede encontrar en la página de inicio de AngularJS bajo de Alambre hasta un Backend.

Mi pregunta: Es allí una manera de animar a la transición entre welcome.html y login.html?

InformationsquelleAutor Greg | 2012-10-26

5 Comentarios

  1. 69

    Angularjs 1.1.4 ha introducido el ng-animar directiva para ayudar a la animación de los diferentes elementos, en particular ng-view.

    También se puede ver el video de este nuevo featue

    ACTUALIZACIÓN como de angularjs 1.2, la forma en que las animaciones de trabajo ha cambiado drásticamente, la mayoría de los de ahora es controlado con CSS, sin tener que configurar las devoluciones de llamada de javascript, etc.. puede comprobar el actualizado tutorial en el Año De Moo. @dfsq se señaló en los comentarios un bonito conjunto de ejemplos.

    • a partir de ahora no puedo encontrar 1.1.4 para descargar. Supongo que se perdió el 3 de abril fecha de lanzamiento?
    • es aquí, supongo que se olvidó de actualizar su sitio, pero si vas al enlace de descarga en la barra de menú superior, usted lo puede encontrar.
    • tengo, gracias!
    • hay un buen tutorial aquí : yearofmoo.com/2013/04/animation-in-angularjs.html
    • 1.2 cambios de manera más fácil que hay en el post actualizado por yearofmoo usted necesita comprobar hacia fuera yearofmoo.com/2013/08/…
    • También he creado una demostración de ngView de animación que pueden ser interesantes para buscar.
    • Sería bueno actualizar esta respuesta w/ saludos a 1.2 (un montón de cambios), ya que se selecciona & la primera, la gente va a ver.
    • actualizado con sus comentarios. Gracias

  2. 16

    Comprobar este código:

    Javascript:

    app.config( ["$routeProvider"], function($routeProvider){
        $routeProvider.when("/part1", {"templateUrl" : "part1"});
        $routeProvider.when("/part2", {"templateUrl" : "part2"});
        $routeProvider.otherwise({"redirectTo":"/part1"});
      }]
    );
    
    function HomeFragmentController($scope) {
        $scope.$on("$routeChangeSuccess", function (scope, next, current) {
            $scope.transitionState = "active"
        });
    }

    CSS:

    .fragmentWrapper {
        overflow: hidden;
    }
    
    .fragment {
        position: relative;
        -moz-transition-property: left;
        -o-transition-property: left;
        -webkit-transition-property: left;
        transition-property: left;
        -moz-transition-duration: 0.1s;
        -o-transition-duration: 0.1s;
        -webkit-transition-duration: 0.1s;
        transition-duration: 0.1s
    }
    
    .fragment:not(.active) {
        left: 540px;
    }
    
    .fragment.active {
        left: 0px;
    }

    Página principal HTML:

    <div class="fragmentWrapper" data-ng-view data-ng-controller="HomeFragmentController">
    </div>

    Parciales HTML de ejemplo:

    <div id="part1" class="fragment {{transitionState}}">
    </div>
    • esto es bastante buena. Sólo un problema: la vista anterior desaparece antes de que éste aparezca, así que en realidad no transición a lo largo de la vista anterior. en artcopycode.com parecen no utilizar las vistas para el enrutamiento, pero han directivas para cada fragmento que se cargan desde el principio.
    • artcopycode.com hace algo completamente diferente del tema, mucho más fácil de ejecutar.
    • este fue mi punto, hacer lo que se pide en el tema: insertar distintos fragmentos en una sola página de la aplicación, y animar el cambio de los fragmentos. Pero en lugar de utilizar un ng-ver y animar entre la vista (que no es fácil, ya que el antiguo punto de vista es eliminado de la DOM antes de que el nuevo punto de vista viene en), que el uso de directivas (para mantener los controladores y plantillas) en su ruta.
  3. 5

    No estoy seguro acerca de una manera de hacerlo directamente con AngularJS, pero usted puede configurar el monitor para que ninguno de bienvenida e inicio de sesión y animar la opacidad con una directiva una vez que se cargan.

    Me gustaría hacerlo de una manera como así. 2 Directrices para la decoloración en el contenido y la decoloración cuando hacer clic en un enlace. La directiva de fadeouts simplemente podría animar un elemento con un ID único o llame a un servicio que emite el fadeout

    Plantilla:

    <div class="tmplWrapper" onLoadFadeIn>
        <a href="somewhere/else" fadeOut>
    </div>

    Directivas:

    angular
      .directive('onLoadFadeIn', ['Fading', function('Fading') {
        return function(scope, element, attrs) {
          $(element).animate(...);
          scope.$on('fading', function() {
        $(element).animate(...);
          });
        }
      }])
      .directive('fadeOut', function() {
        return function(scope, element, attrs) {
          element.bind('fadeOut', function(e) {
        Fading.fadeOut(e.target);
      });
        }
      });

    Servicio:

    angular.factory('Fading', function() {
      var news;
      news.setActiveUnit = function() {
        $rootScope.$broadcast('fadeOut');
      };
      return news;
    })

    Acabo de armar este código de forma rápida por lo que puede haber algunos errores 🙂

    • Podría adaptar su respuesta hacia el uso de ng-view y la transición entre páginas html? gracias!
    • No tengo idea de lo que significa la adaptación hacia ng-view. Creo ng-view no es capaz de transiciones. No estoy seguro, pero podría mejorar la ng-vista la directiva O crear su propio ayudante directivas como se muestra arriba. Si ahora carga la bienvenida a la onLoadFadeIn directiva puede desaparecer en el html y el después de hacer clic en un enlace que se desvaneció. Qué más se necesita?
    • sí, creo que me gustaría el ng-vista la directiva a tener que incorporar directamente en ella. Gracias por su tiempo.
    • Creo que en este caso me gustaría crear una nueva ng-view y mejorarla con el desvanecimiento de la funcionalidad 🙂

Dejar respuesta

Please enter your comment!
Please enter your name here