css - ngAnimate 可以进行条件转换吗？

Question

我已经使用 ngAnimate 在 ngView 上的应用程序中设置了动画。每次状态发生变化时，下一个 View 都会从右侧滑入。

我希望能够扭转这一情况，以便在某些情况下， View 从左侧滑入(如果用户返回)。

由于提供的唯一类(class)是 .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);
}

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

Answer 1

我不会做所有的跑腿工作来编码，但会提供建议的方法。

将要求您检查 $stateChangeStart 中的历史记录并将路径与下一个路径进行比较

根据匹配与否切换 ui-view 上的类

然后编写一组更特定于该类的 CSS 规则

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