CODEWITHSUNDEEP
javascriptangularjsanimation
Nikolay Aleshkovskiy
Nikolay Aleshkovskiy

Reputation: 727

Different animations on different routes in AngularJS

I want to make slide animations between pages. I made basic slide animation from right to left, like this: AngularJS animation examples

But for the different routes, i want different animations (from right to left, or from left to right). I found some solutions for older versions of angularjs. I think there must be an easy way to do it now, when animations is a part of angular. Where can i find some examples?

Upvotes: 0

Views: 216

Answers (1)

tasseKATT
tasseKATT

Reputation: 38490

Add a custom property for each route specifying the animation class to use:

$routeProvider.when('/view1', {
  templateUrl: 'view1.html',
  controller: 'View1Controller',
  animation: 'from-left'
});

$routeProvider.when('/view2', {
  templateUrl: 'view2.html',
  controller: 'View2Controller',
  animation: 'from-right'
});

Then add a directive that retrieves the current route's animation and adds it to the element:

app.directive('viewAnimation', function ($route) {
  return {
    restrict: 'A',
    link: function (scope, element) {
      var animation = $route.current.animation;
      if (animation) element.addClass(animation);
    }
  };
});

Put the directive on the same element that contains the ngView directive:

<body ng-view view-animation></body>

Might need some tweaks depending on your use case, but should hopefully be a good start.

Demo: http://plnkr.co/edit/jJgWoQ9lCPonmx5KmSJ6?p=preview

Upvotes: 1

Related Questions