How to dynamically adjust animation using ng-view in Angular?

Question

I use ng-view to switch between views using animation (angular 1.2RC1). To determine the direction the animation should take, I insert the class as slide left or slide right in the ng-view div before invoking my location change. The remaining animation (the first to run) works, but then removes my class from the ng-view div.

I use the service to determine whether to shift left or right to right as 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 the class in the 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 like the slideView (ng-view) classes are already cached and updated after completion, so I'm wondering how to update the cache or change my approach?

Thanks so much for any help.

http://jsfiddle.net/RoryOSiochain/BfJWf/

Manually including a slide left or slide right class in a slide show in the violin works fine.

Update: I hope my use of jQuery above does not confuse the problem using ng-class and jQuery and return the same result / experience.

Answer 1

For anyone experiencing this problem:

It turns out that 1.2RC1 has a problem with input animations when using the ng class. This is now fixed in 1.2RC2 and works as expected.

Working demo

http://jsfiddle.net/RoryOSiochain/vWT2z/

UPDATE: Using the xpepermint clause, I updated Fiddle with a working version:

(without full page indexing)

If you use this, set the frame index value here (with hardcode 3) -

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

Strike>

Answer 2

I would modify the if as follows:

 function AppCtrl($scope, $location, viewSlideIndex) { $scope.slideView = function (index, url) { // // Set the value of the current view index to compare against here: // if (viewSlideIndex.getViewIndex() > index) $scope.slideDir = 'slide-left'; else $scope.slideDir = 'slide-right'; viewSlideIndex.setViewIndex(index); $location.url(url); } };