Возможны ли условные переходы с помощью ngAnimate?

Question

У меня есть настройка анимации в приложении на ngView с помощью ngAnimate. Каждый раз, когда происходит изменение состояния, следующее представление переходит с вправо.

Я хотел бы быть в состоянии изменить это, так что в некоторых случаях, вид задвигает из оставил (если пользователь будет назад).

С: Предлагаются только классы: .ng-enter, .ng-leave и .*-active, каковы мои варианты? Возможно ли это?

Here's a CodePen, ИЛИ см мой пример кода здесь:

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

яваскрипта

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

Answer 1

Я не собираюсь выполнять всю работу с ногами, чтобы кодировать это, но предоставит предлагаемый способ сделать это.

Потребует проверить историю в $stateChangeStart и сравнить путь к следующему пути

Переключить класс на ui-view основанный на матч или не

Затем написать набор правил CSS, которые являются более конкретными к тому, что класс

[ui-view].ng-enter.fromRightClass{}