Multi-directional angularjs view animation

Question

The goal: A multi-directional horizontal slide animation between angularjs views that slides left or right depending on the order of navigation.

The problem: I can't find a good way to let the view know that I am going a specific direction that actually works.

What I've got so far: See this codepen. I'm applying the back class to the body if we're going backwards in navigation based on the order of the objects in the navigation. I use this class to tell the view to animate inversely if necessary.

$scope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
    $scope.back = toParams.id < fromParams.id ? true : false;
});

Why I don't think it's working: The 'back' class isn't being applied to the newly inserted 'ui-view' element, so it is not obeying the css.

Anyone got any ideas? Feel free to fork to codepen...

Answer 1

This is probably a workaround and not the right way to do this. What i did was re apply the class . I noticed the animation only happens when the back class is switched . So on state-change start i swapped the back class and re applied it.

    $scope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
       $scope.back = $scope.back ? false : true;
       $timeout( function(){        
           $scope.back = toParams.id < fromParams.id ? true : false;
       }, 1);       
});

Here is the pen.