ngAnimate 是否可以进行条件转换？

Question

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

我希望能够反转它，以便在某些情况下，视图从左侧滑入（如果用户要返回).

由于唯一提供的类是 .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 上切换 class

然后编写一组更具体的 css 规则 class

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

ngAnimate 是否可以进行条件转换？

Are conditional transitions possible with ngAnimate?

css

angularjs

ng-animate

angular-ui-router