AngularJS transitions with ui-view, wrong behaviour when changing direction

Question

I'm trying to apply a transition on my content inside a ui-view. The transition is a simple slide effect which slides from right to left to go deeper in the app, and from left to right when going back.

I found several people with the same problem, then I found this thread Two different animations for route changes which gives a solution, but it was not working for me.

html

<div ng-app="exampleApp" id="app">
  <a ui-sref="state1">State 1</a>
  <a ui-sref="state2">State 2</a>
  <a ui-sref="state3">State 3</a>
  <div class="viewWrap" ng-controller="viewCtrl" ng-class="direction">
    <div class="container" ui-view ></div>
  </div>
</div>

js

var app = angular.module('exampleApp', ['ui.router.compat', 'ngAnimate']);

app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('state1', {
        template: '<div id="state1"><p>Slide 1</p></div>',
        url: '/state1',
        depth: 1
    });

    $stateProvider.state('state2', {
        template: '<div id="state2"><p>Slide 2</p></div>',
        url: '/state2',
        depth: 2
    });

  $stateProvider.state('state3', {
        template: '<div id="state3"><p>Slide 3</p></div>',
        url: '/state3',
        depth: 3
    });

    // For any unmatched url, redirect to /state1
    $urlRouterProvider.otherwise("/state1");                        
})

.controller('viewCtrl', function ($scope) {

  $scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
    if (fromState.depth > toState.depth) {
     $scope.direction = 'right'; 
    } else {
     $scope.direction = 'left'; 
    }
  });
});

css

#state1 {
  width: 100%;
  height: 400px;
  background: red;
}

#state2 {
  width: 100%;
  height: 400px;
  background: blue; 
}

#state3 {
  width: 100%;
  height: 400px;
  background: green;
}

.container {
  position: absolute;
  width: 100%;
}

.viewWrap {
  overflow: hidden;
}

.container.ng-enter,
.container.ng-leave {
  -webkit-transition: 0.5s ease all;
  transition: 0.5s ease all;
}

.left .container.ng-enter {
  -webkit-transform: translate3d(100%, 0, 0);
}
.left .container.ng-leave.ng-leave-active {
  -webkit-transform: translate3d(-100%, 0, 0);
}
.right .container.ng-enter {
  -webkit-transform: translate3d(-100%, 0, 0);
}
.right .container.ng-leave.ng-leave-active {
  -webkit-transform: translate3d(100%, 0, 0);
}
.container.ng-leave,
.container.ng-enter.ng-enter-active {
  -webkit-transform: translate3d(0, 0, 0);
}

Then I saw that it wasn't ui.router that was used as a dependency, but ui.router.compat. So I tried to use it instead of ui.router, and it seems to work.

ui.router (not working) http://codepen.io/anon/pen/LVWpXM
ui.router.compat (working) http://codepen.io/anon/pen/qdrOoM

But according to the doc https://github.com/angular-ui/ui-router/wiki/Backwards-Compatibility, ui.router.compat is not supposed to do that at all.

Any ideas to make this work with ui.router ?

AngularJS transitions with ui-view, wrong behaviour when changing direction

0 Answers0