CODEWITHSUNDEEP
angularjsng-animate
Rory O'Siochain
Rory O'Siochain

Reputation: 61

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

I'm using an ng-view to transition between views using animation (angular 1.2RC1). To determine the direction the animation should take, I'm inserting a class either of slide-left or slide-right on the ng-view div before calling my location change. The leave animation (first to run) works but then removes my class from the ng-view div.

I use a service to determine whether to slide left or slide 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 as though the slideView (ng-view) classes have already been cached and are refreshed upon completion, so I'm wondering how to either update the cache or change my approach?

Many thanks for any help.

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

Manually inserting a slide-left or slide-right class into slideView in the fiddle works fine.

Update: Hopefully my use of Jquery above doesn't confuse the issue, using ng-class and jQuery both return the same result/experience.

Upvotes: 4

Views: 4879

Answers (2)

Rory O&#39;Siochain
Rory O&#39;Siochain

Reputation: 61

For anyone else experiencing this issue:

It turns out that 1.2RC1 has an issue with the enter animation when using ng-class. This has now been fixed in 1.2RC2 and works as expected.

Working demo

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

UPDATE: Using xpepermint's suggestion, I've updated the Fiddle with a working version:

(without page indexing fully applied)

If using this, set the frame index value (hardcoded to 3 below) here - 

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

Upvotes: 2

xpepermint
xpepermint

Reputation: 36263

I would change the if statement like this:

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);
    }

};

Upvotes: 1

Related Questions