Question

我使用ngAnimate在ngView上的应用程序中设置了一个动画。每次状态更改时，下一个视图都会从右侧滑入。

我希望能够撤消这一点，以便在某些情况下，视图从左侧（如果用户返回）滑入。< / p>

由于提供的课程只有.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{}

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

1 个答案: