angularjs - How do I dynamically set an animation using ng-view in Angular? -

i'm using ng-view transition between views using animation (angular 1.2rc1). determine direction animation should take, i'm inserting class either of slide-left or slide-right on ng-view div before calling location change. leave animation (first run) works removes class ng-view div.

i use service determine whether slide left or slide right follows:

$scope.slideview = function(index, url){     if ( viewslideindex.getviewindex() > index) {     $('#slideview')       .toggleclass("slide-left", false)       .toggleclass("slide-right", true);   }    else {     $('#slideview')       .toggleclass("slide-left", true)       .toggleclass("slide-right", false);   };   $location.url(url); }  

which updates class in ng-view div:

<button ng-click='slideview(1, "/pg1")'>pg1</button> <button ng-click='slideview(2, "/pg2")'>pg2</button> <button ng-click='slideview(3, "/pg3")'>pg3</button> <div id="slideview" ng-view class="slide-right"></div> 

it looks though slideview (ng-view) classes have been cached , refreshed upon completion, i'm wondering how either update cache or change approach?

many help.

http://jsfiddle.net/roryosiochain/bfjwf/

manually inserting slide-left or slide-right class slideview in fiddle works fine.

update: use of jquery above doesn't confuse issue, using ng-class , jquery both return same result/experience.

for else experiencing issue:

it turns out 1.2rc1 has issue enter animation when using ng-class. has been fixed in 1.2rc2 , works expected.

working demo

http://jsfiddle.net/roryosiochain/vwt2z/

update: using xpepermint's suggestion, i've updated fiddle working version:

(without page indexing applied)

if using this, set frame index value (hardcoded 3 below) here -

    //     // set value of index compare against here:     //     if (3 > index) {         $scope.slidedir = 'slide-right';     } else {         $scope.slidedir = 'slide-left';     };