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:

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.

Solved

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


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

};

Comments

Post a Comment

Popular posts from this blog

Autocorrect Spell Checker

I have a TSV (tab-separated value) file that I need to spell-check for misspellings and combined words (ie 'I love you' vs 'Iloveyou'). I've installed Aspell on my machine and can run it through R using the aspell() function. files However, the output from running it in R is just a list of misspelled words and possible suggestions. > summary(res) Possibly mis-spelled words: [1] "amant" "contaneir" "creat" "ddition" "EssaySet" "EssayText" "experiament" "expireiment" "expirement" [10] "Fipst" "infomation" "Inorder" "measureing" "mintued" "neccisary" "officialy" "renuminering" "rinsen" [19] "sticlenx" "sucessfully" "tipe" "vineager" "vinigar" ...
Read more

re: Error on Google BigQueryJavaGettingStarted

I am new to Google bigquery , and I just tried to run the Google BigQueryJavaGettingStarted, but I am having problems. It gave me error messages saying that "The method setDataStoreFactory(FileDataStoreFactory) is undefined for the type GoogleAuthorizationCodeFlow.Builder", and "The method load(JsonFactory, InputStream) in the type GoogleClientSecrets is not applicable for the arguments (JacksonFactory, Reader)". I could not figure out why it gave me such errors since I have import all the spcific jar files from the tutorial to my project. So any ideas on how to fix these errors would be greatly appreciated. Many Thanks in advance for all of your help. Below is my simple program from Google BigQueryJavaGettingStarted package com.google.cloud.bigquery.samples; import com.google.api.client.auth.oauth2.Credential; import com.google.api.client.extensions.java6.auth.oauth2.AuthorizationCodeInstalledApp; import com.google.api.client.extensions.jetty.auth.oauth2.L...
Read more