Search code examples
javascriptangularjsanimationangular-ui-routerng-animate

How ui-router works with ng-animate?

I certainly hope that you guys can show me where did I go wrong.

So I try to put together ui-router with ng-animate. Routing works like charm. However, ng-animate staggers to kick in. According to all the samples and docs that I've been reading, the ui-view container should be duplicated, but it does not occur. Instead the container's innerHTML is replaced. I also use an external animation library called animate.css

So I put together a plunkr in hope that some of you could help me out.

Here is a plunkr demo

view1:

<section class="view1" >
<h1>VIEW 1</h1>
<a ui-sref="view2">view2</a>
</section>

view2:

<section class="view2" >
<h1>VIEW 2</h1>
<a ui-sref="view1">view1</a>
</section>

styles:

 body {
   width: 100%;
 }

 .view-container {
   width: 100%;
 }

 .view-container.ng-enter .view1,
 .view-container.ng-enter .view2,
 .view-container.ng-leave .view1,
 .view-container.ng-leave .view2 {
   position: absolute;
   left: 30px;
   right: 30px;
   transition: 0.5s all ease;
   -moz-transition: 0.5s all ease;
   -webkit-transition: 0.5s all ease;
 }

 .view-container.ng-enter .view1,
 .view-container.ng-enter .view2 {
   -webkit-animation: slideInRight 0.5s both ease;
   -moz-animation: slideInRight 0.5s both ease;
   animation: slideInRight 0.5s both ease;
 }

 .view-container.ng-leave .view1 .view-container.ng-leave .view2 {
   -webkit-animation: slideOutLeft 0.5s both ease;
   -moz-animation: slideOutLeft 0.5s both ease;
   animation: slideOutLeft 0.5s both ease;
 }

 .view1,
 .view2 {
   width: 100%;
   height: 300px;
   border: 2px solid red;
 }

 .view2 {
   border: 2px solid green;
 }

scripts:

     'use strict';

 var mainModule = angular.module('poc', ['ui.router', 'ngAnimate']);
 mainModule.config(["$stateProvider", "$urlRouterProvider",
     function($stateProvider, $urlRouterProvider) {

         $stateProvider
             .state('view1', {
                 url: '/view1',
                 templateUrl: 'view1.html',
             }).state('view2', {
             url: '/view2',
             templateUrl: 'view2.html',
         });

         $urlRouterProvider.otherwise('/view1');
     }
 ]);

 mainModule.run(["$rootScope", "$state",
     function($rootScope, $state) {

         $rootScope.$on('$stateChangeSuccess', function(event, endState, endParams, startState, startParams) {
             console.log(endState);
         });

         $rootScope.$on('$stateChangeError', function(event, endState, endParams, startState, startParams) {
             console.warn(startState);
             console.warn(endState);
         });
     }
 ]);

index.html:

     <!DOCTYPE html>
 <html>

   <head>

     <link rel="stylesheet" href="style.css" />
   </head>

   <body data-ng-app="poc">
     <div ui-view="" class="view-container"></div>
     <script src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9" data-require="[email protected]"></script>
     <script src="https://code.angularjs.org/1.4.9/angular-animate.js" data-semver="1.4.9" data-require="angular-animate@*"></script>
     <script data-require="[email protected]" data-semver="0.2.18" src="//cdn.rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.js"></script>
     <script src="script.js"></script>
   </body>

 </html>

Any help is appreciated.

Solution

  • You need to add some animation definitions for slideInRight and slideOutLeft

    Can use animate.css library for those.

    For starters I suggest moving the animation selectors to your <ui-view> element

    What actually happens is when a transition time is detected....the element will be cloned allowing for 2 in dom at once ... one entering and one leaving. You can see this in the live html in browser dev tools

    DEMO