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

Posted 2023-03-06

【中文标题】ngAnimate 是不是可以进行条件转换？

【英文标题】：Are conditional transitions possible with ngAnimate?ngAnimate 是否可以进行条件转换？

【发布时间】：2015-12-22 08:45:25

【问题描述】：

我使用 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');
  

【问题讨论】：

这是一个不优雅且不太灵活的示例，用于实现您似乎正在寻找的内容：codepen.io/anon/pen/YyGjBa

@Asok 这让我知道从哪里开始。谢谢！！

【参考方案1】：

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

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

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

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

[ui-view].ng-enter.fromRightClass

【讨论】：

这很有意义。感谢您的快速回复。是否可以直接从$stateChangeStart 在ui-view 上设置类，或者我需要在控制器上设置一个布尔值或其他东西，然后执行：<div ui-view ng-class=" fromRight: fromRight "></div>

我认为无论哪种方式都可以......如果你真的使用 angular.element().addClass() 操作 dom 就不需要摘要