AngularJS: Changing ng-animate css on-the-fly

Question

I working on a multi-stage-web-form with AngularJS, as you can see at the following example:

When you click the "Next" button, the form slides right, but when you click the "Back" button, the form isn't slides left as it should, I need to change the "ng-animate" css when the "Back" button is clicked.

How should I accomplish that ?

Thanks !

lucuma · Accepted Answer · 2014-02-03 19:45:36Z

8

In your controller you can set a variable that determines the direction of the animation.. So something like this (pseudocode):

$scope.update = function() {
   $scope.direction = 1;
}

$scope.backTo = function() {
   $scope.direction = 0;
}

In your html you'd surround the areas that are animating:

<div ng-class="{forward: direction, backward: !direction}">
   your animated stuff here
</div>

Now just setup your css rules:

.forward .animate-switch.ng-leave{  
  left:0;
}
/* hide */
.forward  .animate-switch.ng-leave.ng-leave-active{ 
  left:-100%;
}
/* show entering slide  */
/* hide */
.forward .animate-switch.ng-enter {
  left:100%;
}
/* show */
.forward .animate-switch.ng-enter.ng-enter-active { 
  left:0;
}

.backward  animate-switch.ng-leave{  
  /* etc */
}

Here is a demo from your code pen: http://codepen.io/sbosell/pen/rKJal

edited Feb 3, 2014 at 19:45

answered Feb 3, 2014 at 19:36

lucuma

18.3k4 gold badges68 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS: Changing ng-animate css on-the-fly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related