问题标签 [angularjs-animation]

我正在使用 Angular 动画的交错功能（https://docs.angularjs.org/api/ngAnimate#css-staggering-animations）。

有没有一种方法可以使用它，并且在所有动画完成之前不会从 DOM 中删除项目？

我创建了一个 Plunker，显示我在说什么：http ://plnkr.co/edit/xlVps9v0iINV11CYlUhG

如果您单击“添加项目”，那么一切看起来都很好。如果您单击“删除项目”，那么一切都开始崩溃，交错的效果变成了癫痫的噩梦。

我想根据重复指令的工作原理，可能没有解决方法。

我已经阅读了 AngularJS 文档，完成了几个教程，包括 scotch 和 moo 教程。我可以让他们的示例代码运行。

但是，我似乎不明白 Angular 应用 CSS 样式来创建动画的触发器是什么。我知道 angular 1.2 应该自动应用它们，但这似乎对我不起作用。

我的目标是让视图（以及控制器）的变化变为动画。我没有显示子视图或其他 CSS 的内容，但如果需要我可以。

下面是代码：

这是JS

这是CSS：

这是HTML：

在我的 AngularJS 应用程序中，我使用 fontawesome 来加载微调器：

我还在使用 AngularToaster 来处理依赖于 ngAnimate 的通知消息。当我在我的 AngularJS 应用程序中包含 ngAnimate 时，它​​会以一种奇怪的方式为它们设置动画，从而弄乱我的加载微调器。我想阻止这种情况发生，但无法找到一种方法来禁用这些加载器上的动画（如果必须更新我的应用程序中的每个加载器也会很臭）。

这是一个显示我的确切问题的 plunkr。

http://plnkr.co/edit/wVY5iSpUST52noIA2h5a

我正在尝试使用多个图像做一个滑块，并且代码适用于向右移动，但是向左移动 ng-move 类应用于数组中的所有元素，这是不可取的。

我的控制器：

我的CSS：

我的HTML：

http://plnkr.co/edit/rJfOH9zxJLGf4rKPJtS4?p=preview

任何意见或不同的做法都会有所帮助

多次创建或自定义指令（我自己的指令或例如https://github.com/dpiccone/ng-pageslide）时，我发现所有显示逻辑都由单个 css 类控制。那时，指令归结为添加和删除单个类。因此，我可以简单地使用 ng-class 指令，而不是使用新指令（参见此处的示例：https ://gist.github.com/Hypercubed/8f40556eb0f6eddbcca3 ）。自定义指令方法与 ng-class/CSS 样式方法相比是否有优势？我猜自定义指令不依赖于 $animate？我只是做错了吗？

对于另一个指令与 XXX 的问题，我们深表歉意。

我有一些代码可以在控制器内创建和注册一些动画。不幸的是，每当我在控制器中注册动画时，它似乎都没有初始化（该函数永远不会被调用。）

我创建了一个plunker来说明这个问题。在此，我在控制器外部调用“createAnim1”，动画正常运行。我在控制器内调用“createAnim2”，动画不起作用。

createAnim 函数的形式为：

我错过了一些明显的东西吗？$animate 和 $animateProvider 文档似乎不包含与此相关的任何内容。

我认为这与编译已经发生的事实有关，并且错过了初始化动画所需的某些步骤？有没有办法解决这个问题？

PS：自上周以来我才使用 Angular，所以我对内部结构并不精通。

编辑：在亚历克斯的评论之后，我认为值得澄清我正在尝试做的事情：

我有一些代码可以生成 css 类动画选择器并将它们附加到文档头。如果浏览器不支持过渡，代码会生成一个等效的 jquery 动画。我试图创建一个工厂来通过 DI 公开此代码，并且当此代码运行时（从控制器内部），动画永远无法触发（初始化代码永远不会运行）。

示例：http ://codepen.io/anon/pen/ixEdu

在上面提供的示例中，我有一个使用 ngClass 的角度动画。当包含动画的元素被重新编译时，动画就会运行。我该如何阻止这种情况发生？

HTML：

CSS：

Javascript：

我以两种不同的方式应用了角度 ngSwitch 动画，一种在指令中，一种在 html 页面上。指令中的动画在页面加载时触发。为什么会发生这种情况以及如何解决？

plunker：http ://plnkr.co/edit/japvWhohw8JaDWkDBUAf?p=preview

索引.html

脚本.js

样式.css

value-rotate.html（指令模板）

我正在使用 AngularJS v1.2.16，得到了简单的动画，如ng-show使用类约定的 fadeIn，但也希望在模型的给定对象发生变化时淡入（或闪烁）给定的 div（该对象的信息显示在该 div 内）。

请注意，我$scope.$apply();用作更改源的代码不是 AngularJS。

也许有一种方法可以在应用之前或之后强制动画，还是应该在指令中完成？由于动画系统上发生的变化，查找这方面的信息非常令人困惑。

惊人的动画很棒！但是如果没有用户交互，我就无法让它工作。

有一个完全正常的 ng-repeat 列表：

在控制器中定义：

还有一些动画的 CSS 规则：

但是在页面加载时，它的显示没有动画。我插入了一个用随机数替换类别数组的按钮，它淡入淡出就好了。

当用户第一次访问页面时，我该怎么做才能让动画工作？

演示在这里：http ://plnkr.co/edit/3zXENPbYA3cxJQ3Pyb34?p=preview

我找到了一些乱七八糟的答案，$timeout()但我只在第一个项目上得到了动画。而且感觉不太好。