In my application, I have set up an animation using ngAnimate on ngView where the next view slides in from the right every time there is a state change.
Now, I want to be able to reverse this behavior so that sometimes the view slides in from the left (for instance, when the user is navigating back). However, since the only available classes are .ng-enter, .ng-leave, and .*-active, I am unsure of what options I have. Is it even possible?
You can view a demo on CodePen, OR check out the sample code below:
HTML
<div ng-app="app">
<div ng-controller="DemoController as vm">
<div ui-view class="foo"></div>
</div>
</div>
CSS
html,
[ui-view] {
background: yellow;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
}
[ui-view].ng-enter,
[ui-view].ng-leave {
position: absolute;
left: 0;
right: 0;
transition:all .5s ease-in-out;
}
[ui-view].ng-enter {
opacity: 0;
transform:translate3d(100%, 0, 0);
/*transform:scale3d(0.5, 0.5, 0.5);*/
}
[ui-view].ng-enter-active {
opacity: 1;
transform:translate3d(0, 0, 0);
/*transform:scale3d(1, 1, 1);*/
}
[ui-view].ng-leave {
opacity: 1;
transform:translate3d(0, 0, 0);
}
[ui-view].ng-leave-active {
opacity: 0;
transform:translate3d(-100%, 0, 0);
}
Javascript
'use strict';
angular.module('app', ['ui.router', 'ngAnimate'])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/one');
$stateProvider
.state('one', {
url: '/one',
template: '<div class="one"><h1>ONE!</h1><button ng-click="vm.two()">go to two</button></div>'
})
.state('two', {
url: '/two',
template: '<div class="two"><h1>TWO!</h1><button ng-click="vm.one()">go to one</button></div>'
});;
})
.controller('DemoController', DemoController);
DemoController.$inject = ['$state'];
function DemoController($state) {
this.one = function() {
$state.go('one');
}
this.two = function() {
$state.go('two');
}
}