使用 AngularJS 为整个应用程序制作动画，而不是谈论特定元素
Animate whole App with AngularJS, not talking about specific element
我是 angularJs 的新手，试图找到使我的应用程序动画化的最佳方式（angular 方式），我一直在阅读有关 ngAnimate 的内容（我了解基本的它是如何工作的）但不是我要找的，这是我的基本情况：
我有主页（想象一下 google 着陆页品牌徽标 + google 图片 + 输入搜索和按钮，白色背景）。当我单击搜索并获得一些结果时，搜索的 DIV 会自行移动到右上角，同时背景逐渐变暗，显示出覆盖整个页面并根据结果显示一些标记的地图。结果也显示在类似容器的卡片中（material 设计卡片 UI 样），如果我单击每个结果（来自结果卡片或标记），则会出现另一张卡片。如果我更改搜索词，那么之前的卡片就会消失。一些额外的操作使一些侧栏被显示并改变布局的配置。
我的整个混乱是，如果我为应用程序的每个部分定义一个控制器，某些部分中的一些事件会改变与应用程序相关的视图的其他部分的配置，所以我真的不知道如何组织那些案例和相关的动画。希望我清楚地说明了这个问题。可悲的是，我找到的所有教程和指南都是非常具体的，并且仅限于一个控制器的动画，用于任何基本操作、显示隐藏、添加中继器等。
非常感谢。
也许创建一个专门的服务来处理所有带有标志的状态机的应用程序动画？？。
听起来您需要一个主控制器来协调应用程序元素之间的通信，这在 Angular 中很可能是自定义指令。自定义指令然后可以有自己的控制器来对自己执行动画。
指令控制器还可以合并其他services/factories，这可能有助于抽象一些重复的动画代码。
指令：
https://docs.angularjs.org/guide/directive
服务：
https://docs.angularjs.org/guide/services
希望对您有所帮助！
我们没有像@spanndemic 建议的那样使用单个控制器进行编排，因为 angular 摘要过程的所有开销都非常高，并且对 UI 有很大影响，就故障。
我们尝试了两种选择并且不知何故效果更好，我们选择了效果最好的第二种。
第一个是使用事件模型，在 required 指令和控制器中，我们订阅了一些特定的事件。我们使用 rootScope 来发布这个事件，这样每个控制器都可以在冒泡时获取事件，并且每个控制器或指令都可以对该事件做出反应。
我们的应用基于状态并使用了 ui-router 模块。这是我们尝试过的所有方法中性能最好的，因为我们可以根据当前状态定义我们的 UI，并且它受益于 ui-router 方法，如 stateChangeStart，因此我们可以在激活任何动画之前进行检测页面，甚至可以使用简单的 javascript 或 CSS 改进动画过程。使用 ui-router 和 stateChangeStart 我们可以创建独立的模块来控制应用程序的动画，而不再在必须处理特定业务代码的控制器中使用动画代码。
我是 angularJs 的新手，试图找到使我的应用程序动画化的最佳方式（angular 方式），我一直在阅读有关 ngAnimate 的内容（我了解基本的它是如何工作的）但不是我要找的，这是我的基本情况：
我有主页（想象一下 google 着陆页品牌徽标 + google 图片 + 输入搜索和按钮，白色背景）。当我单击搜索并获得一些结果时，搜索的 DIV 会自行移动到右上角，同时背景逐渐变暗，显示出覆盖整个页面并根据结果显示一些标记的地图。结果也显示在类似容器的卡片中（material 设计卡片 UI 样），如果我单击每个结果（来自结果卡片或标记），则会出现另一张卡片。如果我更改搜索词，那么之前的卡片就会消失。一些额外的操作使一些侧栏被显示并改变布局的配置。
我的整个混乱是，如果我为应用程序的每个部分定义一个控制器，某些部分中的一些事件会改变与应用程序相关的视图的其他部分的配置，所以我真的不知道如何组织那些案例和相关的动画。希望我清楚地说明了这个问题。可悲的是，我找到的所有教程和指南都是非常具体的，并且仅限于一个控制器的动画，用于任何基本操作、显示隐藏、添加中继器等。
非常感谢。
也许创建一个专门的服务来处理所有带有标志的状态机的应用程序动画？？。
听起来您需要一个主控制器来协调应用程序元素之间的通信，这在 Angular 中很可能是自定义指令。自定义指令然后可以有自己的控制器来对自己执行动画。
指令控制器还可以合并其他services/factories，这可能有助于抽象一些重复的动画代码。
指令： https://docs.angularjs.org/guide/directive
服务： https://docs.angularjs.org/guide/services
希望对您有所帮助！
我们没有像@spanndemic 建议的那样使用单个控制器进行编排，因为 angular 摘要过程的所有开销都非常高，并且对 UI 有很大影响，就故障。 我们尝试了两种选择并且不知何故效果更好，我们选择了效果最好的第二种。
第一个是使用事件模型，在 required 指令和控制器中，我们订阅了一些特定的事件。我们使用 rootScope 来发布这个事件，这样每个控制器都可以在冒泡时获取事件，并且每个控制器或指令都可以对该事件做出反应。
我们的应用基于状态并使用了 ui-router 模块。这是我们尝试过的所有方法中性能最好的，因为我们可以根据当前状态定义我们的 UI，并且它受益于 ui-router 方法，如 stateChangeStart，因此我们可以在激活任何动画之前进行检测页面，甚至可以使用简单的 javascript 或 CSS 改进动画过程。使用 ui-router 和 stateChangeStart 我们可以创建独立的模块来控制应用程序的动画，而不再在必须处理特定业务代码的控制器中使用动画代码。