javascript - How to make Angular ng-switch animate(enter/leave) in more than one way? -

i write angular directive called 'cardviewer', can show images inside animation.

when press "prev" button, image slides left. when press "next" button, image slides right.

i try ng-switch, supports .ng-enter , .ng-leave animation class. need 2 ways enter(enter left , right), 2 ways leave(leave left , right).

so try ng-class solve problem. hope can add toleft class before switch, can apply specific css animation.

but seems not working properly. when press "next" button twice, works fine. when press "next", press "prev", new image enter in right direction, old image leave in wrong direction.

my directive template:

<h1>hahaha</h1>   <div>     <button ng-click='prev()'>prev</button>     <button ng-click='next()'>next</button>   </div> <div>current card index: {{displaycard}}</div>  <div class="card-container" ng-switch="displaycard"> <img class="card"    src="http://i.imgur.com/ejrdicf.jpg" ng-switch-when="1"     ng-class="{'toleft': toleft, 'toright': toright}"/> <img class="card"    src="http://i.imgur.com/staox5y.jpg" ng-switch-when="2"     ng-class="{'toleft': toleft, 'toright': toright}"/> <img class="card"    src="http://i.imgur.com/encdvle.jpg" ng-switch-when="3"     ng-class="{'toleft': toleft, 'toright': toright}"/> </div> 

directive:

angular.module('app', ['nganimate'])   .directive('cardviewer', function() {    return {     templateurl: 'cardviewer.html',     link: function(scope, element, attr) {       scope.toleft = false;       scope.toright = false;        scope.displaycard = 1;        //when press prev, card slide left       scope.prev = function() {         scope.toleft = true;         scope.toright = false;         if (scope.displaycard == 1) {           scope.displaycard = 3         } else {           scope.displaycard -= 1;         }       };        //when press prev, card slide right       scope.next = function() {         scope.toleft = false;         scope.toright = true;          if (scope.displaycard == 3) {           scope.displaycard = 1         } else {           scope.displaycard += 1;         }       };     }   } }); 

css:

.card-container {   position: relative;   height: 500px;   overflow: hidden; } .card {   width: 100%;   position: absolute; }  .card.ng-animate {   transition: 1s linear all; }  .card.ng-enter.toleft {   left: 100%; } .card.ng-enter-active.toleft {   left: 0; } .card.ng-leave.toleft {   left: 0; } .card.ng-leave-active.toleft {   left: -100%; }  .card.ng-enter.toright {   left: -100%; }  .card.ng-enter-active.toright {   left: 0; }  .card.ng-leave.toright {   left: 0; }  .card.ng-leave-active.toright {   left: 100%; } 

here plunker: cardviewer

what's wrong code? what's right way make ng-switch enter/leave in more 1 way?

the problem ngswitch destroying scope of current image before ngclass has chance execute , change image's class toright toleft (or vice versa) before animation starts.

ngswitch creates new scope , executes @ priority level 1200, while ngclass executes @ priority level 0.

to make work, need update next , prev methods set displaycard property in $timeout, after toleft , toright set, ngclass has opportunity act on new toleft/toright settings before ngswitch destroys scope.

so next method, example, this:

scope.next = function() {   scope.toleft = false;   scope.toright = true;    // need in $timeout ngclass has    // chance update current image's class based    // on new toleft , toright settings before   // ngswitch acts on new displaycard setting   // , destroys current images's scope.   $timeout(function () {     if (scope.displaycard == 3) {       scope.displaycard = 1     } else {       scope.displaycard += 1;     }   }, 0); }; 

here's fork plunk showing working. open console see log messages when ngclass adds classes , ngswitch destroys , creates scopes.

i left original "next" , "prev" buttons there , added "next (fixed)" , "prev (fixed)" buttons can compare log messages , see how, using original buttons, ngswitch destroys scope before ngclass executes, while in fixed versions ngclass executes before ngswitch destroys scope.