0

我开始将具有大量复杂 JQuery DOM 操作和 ASP.NET MVC 后端的大型 Web 应用程序转换为更易于管理的东西。我正在将服务器端代码转换为 REST API，并且我想使用 AngularJS 来驱动 UI。

我首先将应用程序的一个区域转换过来，该区域由三个屏幕组成。在一个屏幕中进行选择会为您提供一组新的选择，您可以前进和后退。通过使用路由，我已经设法非常干净地实现了这种行为；每个选项都是与 的链接href='#/something...'，这会通过加载不同的控制器/模板来改变 UI 状态。

我现在正在尝试为这个过渡设置动画。该属性通过and选项ng-animate让我大部分时间都在那里，但这些实际上是同时触发的！结果在视觉上非常混乱。我理想中想要的是一种干净的方式来管理以下事件序列：enterleave

  • 用户单击第一个屏幕中的按钮
  • 第一个屏幕动画出来
  • 同时向 REST api 请求下一组选择
  • 完成前两件事后，第二个屏幕动画进入。

我可以通过使用resolve参数来实现这个没有动画$routeProvider，但我不知道如何使动画正常工作！管理这种状态的正确方法是什么？

4

1 回答 1

0

您可以编写自己的代码来实现动画，如下所述：http: //code.angularjs.org/1.1.4/docs/api/ng.directive: ngAnimate

所以也许可以这样做：

  1. 在“离开”时，您启动动画并向服务器发出请求。
  2. 同时在“Enter”上，您不会立即开始动画。您正在等待来自数据加载器的信号。
  3. 服务器响应数据。您发出信号表明这已准备就绪。
  4. “Enter”实现启动动画。

怎么监控flag？你可以简单地用 setTimeout 观察全局变量，但这有点难看。我认为使用某种允许您订阅“数据就绪”事件的发布/订阅机制会更好。比如我用的是postal.js，对它还是挺满意的。

于 2013-06-20T08:54:18.753 回答