CODEWITHSUNDEEP
angularjsanimation
user2168435
user2168435

Reputation: 762

AngularJS animations with ui router not working

I am trying to learn my way through AngularJS and currently trying to play around with animations between state transitions using ui.router. whatever i do there are no animations and the state just changes without a transition.

Versions

angularJS v1.3.16
angular-animate 1.4.1
angular-ui-router 0.2.15

My JS 

angular.module('myApp', [
'ui.router',
'ngAnimate'
]).
config(function($stateProvider,$urlRouterProvider) {
  $stateProvider
      .state(
      "dashboard",{
        url: "/dashboard",
        templateUrl: "dashboard.html",
      }
  )
      .state(
      "terminals",{
        url: "/terminals",
        templateUrl: "terminals.html",
      }
  )
  $urlRouterProvider.otherwise("/dashboard")
});

on my page i have 

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

and an extract from my css 

.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%);
 }

would appreciate any pointers where im going wrong.

Upvotes: 0

Views: 1036

Answers (1)

Paweł Smołka
Paweł Smołka

Reputation: 638

I have same battle when I was using DJANGO as a backend. When I had an animation made for angular-route it was 'cutting-in-half' this animation.

Since I use expressjs + nodejs it not happens anymore.

I here I paste my parts of code I used.

VERY IMPORTANT IS TO MAKE IT FOR HTML5!

There was also to make CSS with stagger and delay as at end of this ans.

This is a working example so if you use angular-route instead of ui.router it will work for you. Also I recomend to update your angular to 1.4.*

var shop = angular.module('shop', ['ngRoute', 'ngAnimate', 'ngTouch']);

shop.config(['$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider) {
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });
        $routeProvider
        .when('/', { 
            templateUrl: '/partials/index',
            controller: 'indexController'
        })
        .when('/cart', { 
            templateUrl: '/partials/cart',
            controller: 'indexController'
        })
        .when('/account',{
            templateUrl: '/account',
            controller: 'profileController'
        })
        .otherwise({
            redirectTo: '/'
        });
    }
]);

Html part:

<div class="ng-view zipper ng-animate"></div>

And CSS (ofcourse you may place your animations here, i just sample it on my to help you):

.zipper.ng-animate {
  transition:0.5s ease all;
}
.zipper.ng-enter {
  opacity:0;

}

.zipper.ng-enter-stagger {
  /* this will have a 100ms delay between each successive leave animation */
  transition-delay: 0.1s;

  /* in case the stagger doesn't work then the duration value
   must be set to 0 to avoid an accidental CSS inheritance */
  transition-duration: 0s;
}

.zipper.ng-enter.ng-enter-active {
  transition-delay:0.6s;
  opacity:1;
  z-index:10;
}
.zipper.ng-leave {
  opacity:1;

}
.zipper.ng-leave.ng-leave-active {
  opacity:0;
  z-index:9;
}

Upvotes: 1

Related Questions