当前位置: 首页 > 面试题库 >

两种不同的动画来改变路线

丰超
2023-03-14
问题内容

我有以下情况:我在AngularJS应用程序中使用ui-
router进行路由。在一种途径中,有五个子状态用于不同的子屏幕。我想以类似轮播的方式为它们之间的过渡设置动画。

导航如下所示:

Link to A | Link to B | Link to C | Link to D | Link to E

从导航state Astate B应该screen A向左screen B滑动并从右侧向内滑动;反之亦然,用于从导航state Bstate A

什么工作是与所述屏幕转换transform: translateX(...);enter,并leave一个 唯一的方向。

通常,我使用ng-class标志来控制动画。但是,在这种情况下,在ui-view元素上设置类根本不起作用(Angular 1.2和ui-router
0.2尚不完全兼容)。它也不使用通过自定义指令设置它的设置来侦听scope.$on "$stateChangeStart"过渡开始后触发的自定义指令。

如何实现所需的行为?

编辑:解决方案

作为记录:我最终使用自定义$scope函数来实现它,该函数$state.go()用于在更改路线之前确定方向。这避免了$digest already in progress错误。确定动画的类将添加到ui-view的父元素;这会ui-view朝着正确的方向对当前和未来进行动画处理。

控制器功能(脚本):

go: (entry) ->
  fromIdx = ...
  toIdx = ...

  if fromIdx > toIdx
    $scope.back = false
  else
    $scope.back = true

  $state.go entry

模板:

<div ng-class="{toLeft: back}">
  <div ui-view></div>
</div>

问题答案:

您可以通过设置控制器来专门控制视图中的类。然后,您可以在应用程序内订阅事件,并更改页面动画的方式。

<div class="viewWrap" ng-controller="viewCtrl">
  <div class="container" ui-view ng-class="{back: back}"></div>
</div>

然后在您的控制器内

.controller('viewCtrl', function ($scope) {
    $scope.$on('$stateChangeSuccess', function (event, toState) {
        if (toState.name === 'state1') {
            $scope.back = true; 
        } else {
            $scope.back = false; 
        }
    });
});

我已经设置了一个Codepen来在这里演示http://codepen.io/ed_conolly/pen/aubKf

对于任何尝试执行此操作的人,请注意,由于Angular 1.2和UI Router中的动画当前不兼容,我不得不使用ui.router.compat模块。



 类似资料:
  • 这篇文章和上一篇cesium编程中级(六)全球视频纹理一样,也是跟群友一起讨论时想出的解决方案^^ 起因是群友希望完成一个功能,在加载czml数据之后,有物体沿着czml中的路径运动,然后运动过程中,会每个几秒钟在路径最后添加一个点,希望能看到路径动态改变而且物体的移动连贯 这里其实重要的点有两个 1. 路径后面每隔一段时间添加一个点 2. 物体连贯运动(这一点是在完成之后,回过头来反思直接写出来

  • 问题内容: 我试图让CSS动画属性在完成后保留,这可能吗? 这就是我想要实现的目标… 当用户登陆页面时,该元素应该被隐藏,在3秒钟(或任何其他时间)之后,该元素应淡入,动画完成后应留在该页面上。 这是一个小提琴尝试… 这是保存代码… 我知道如何使用jQuery ..就像这样… 问题答案: 我认为您正在寻找CSS3属性 animation-fill-mode CSS属性指定CSS动画在执行之前和之后

  • 我最近发现了一些UIView动画代码,并注意到它没有正确使用animateKeyframesWithDuration:delay:options:animations:completion:方法,并且一直在尝试修复它,但由于某些原因,动画不完全相同。 以下是我找到的代码: 这有两个问题: 应该真正使用关键帧动画,而不是在完成块中嵌套动画 使用animateKeyframesWithDuration

  • 我有两个不同的方法,在两个不同的类中。我希望他们都能阅读同一行输入,并检查不同的内容。一个查找“给我冲杯咖啡”之类的说明,另一个查找不同的关键字,如“请”和“谢谢”(这些影响程序对我的反应): 然后我在我的主字符串中调用它们,只是为了测试它们: 我的控制台显示如下: 我知道发生了什么,但我想不出其他办法。我也尝试过使用同一个扫描仪,不同的字符串,但仍然不起作用。我怎样才能使这两种方法都能读取我的第

  • 我在Java中有两个几乎相同的方法。唯一的区别是它们有不同的参数类型。它们使用泛型并返回输入参数的类型T。我怎样才能摆脱重复的代码?下面是我的两个方法。最后,它们都使用不同的类型调用Spring。否则,方法是相同的。

  • 我在Cplex中使用Python API来解决一个线性编程问题。使用Cplex时,我的结果如下: 但随后我将LP prolem保存为LP文件,并再次使用Cplex进行求解,结果与第一个略有不同: 下面是我的功能: