问题标签 [ng-animate]

我有一个指令，在用户单击按钮后将一段 html 附加到 DOM 中的元素。在渲染这段 HTML 时，最好的动画方法是什么？

enter和事件似乎对此leave不起作用，因为我正在附加使用element.append(myHtmlChunk);

有任何想法吗？

我创建了一个表，用户可以在其中增加和减少值。见小提琴

我想在模型更新时做动画，即表格列的背景颜色从红色变为白色，以防用户更改值。

因此，当您单击任何特定列中的向上箭头或向下箭头时，该表列的背景颜色将从红色变为白色。

我无法理解它。关于如何实现这一目标的任何指示？

使用路由我从一页转到另一页。在这样做的时候，我想要一个翻转的动画效果。

像这样http://davidwalsh.name/demo/css-flip.php

注意：我要从一页转到另一页，我不想在同一页上有两个模块并应用翻转。

有没有人有最好的方法来做到这一点？

测试用例：http ://plnkr.co/edit/dsG3gxFomAK8Q15Xfouj?p=preview

上面的测试用例是使用ng-repeat指令两次呈现的数据列表。一次不使用ng-include，一次使用ng-include。

为指令支持的所有三个（进入、离开和移动）动画设置了 CSS 过渡。ng-repeat所有三个动画在不使用时都可以正常工作ng-include，但只有enter动画在使用ng-include加载列表中每个项目的模板时才有效。

我很确定这是一个错误，angular-animate但不确定。ng-repeat使用和ng-include组合时我可能做错了什么。我尝试挖掘angular-animate源代码并解决问题，但不能。我所想的（希望是真的）是该ng-include指令在所呈现的每个项目上方添加了一个注释节点，ng-repeat并且该节点正在摆脱angular-animate's 的工作。这也是两个实现之间唯一明显的区别。

另请注意，当没有设置动画时，所有功能都可以正常工作。但是在使用 的示例中ng-include，不仅动画（用于向上或向下移动项目）搞砸了，而且项目甚至都没有移动。

这是一个错误吗？如果是这样，是否有已知的解决方法？我尝试在 github 上搜索 angular.js 的问题，但找不到解决方法（我发现的那些不起作用）。感谢您对此的任何帮助。

我有一个 AngularJS 1.2.2 Web 应用程序<div>，我根据某些$scope属性显示/隐藏它。使用该ngAnimate模块，我为<div>.

我也有一堂课，我想在这上面放一堂课<div>，为此我使用ngClass.

碰巧的是，有时该类会在<div>显示/隐藏的同时应用。这导致显示/隐藏动画不再起作用，显然它发现ngClass动画更有趣，即使我不想ngAnimate用于该动画。

这是一个演示行为的 Plnkr。单击显示/隐藏按钮效果很好，单击制作酷按钮效果很好，但是结合这两者的按钮会导致显示/隐藏动画中断。

我该如何解决？我可以在不手动寻址的情况下做到这一点$animate吗？

提前致谢！

我只使用 Angular 大约一个星期，所以如果我的代码很垃圾，我深表歉意。

我正在尝试在路线转换之间创建滑动动作。我可以在幻灯片中创建效果，但不能在路线转换之间创建。

无论如何代码如下：导航

视图

css

包括

javascript:

完整项目在https://github.com/arttay/blizz

谢谢

我不明白为什么回调会立即被调用，没有任何延迟，我已经阅读了它说它解析 css 以检索转换持续时间的文档。

但它似乎不起作用，这是我的代码：

这是我的幻灯片指令：

这是我的CSS：

在我的应用程序中，我想在加载过程中显示加载指示。我已经成功地实现了这一点：

Plunker：http ://plnkr.co/edit/L6opqA?p=preview

但是，我认为我在添加和删除类时复制了很多 ngAnimate 代码，并且在content-loaded使用硬编码超时对删除进行硬编码时。

是否可以将我的示例转换为使用重复代码较少的 ngAnimate？

我自己很难弄清楚这一点，因为关于 ngAnimate 的文档并不关注 JS 触发的动画。

没有反映在 plunker 中的小注意事项：我必须在加载期间渲染元素的子元素，因为该元素包含一个调用 jQuery 插件，$.width对于未渲染的元素，它将返回 0。

我正在尝试编写一个指令，使用 CSS 过渡将元素从屏幕上的一个位置移动到另一个位置，其中位置由元素上的 Javascript / 属性确定，并且在预写的 CSS。另外，我需要一个回调，到 $scope 中的一个函数，在转换结束时完成，这是在自定义属性中指定的。所以元素看起来像

为了为此使用 $animate，在我的自定义指令 moveMe 中，单击时我会动态地将样式块添加到页面

然后使用

完成后处理动画和回调。一个示例 plunkr 可在

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

这似乎过于复杂：向页面添加样式标签似乎相当复杂。我这样做是为了可以在外部样式表中指定转换本身，根据运行时间和计时函数，并使用 $animate.addClass 以便 Angular 可以确定触发回调的正确时间。

有没有更简单/更好的方法来实现我想要的？

这个例子被简化为我的实际用例。在我的例子中，动画元素是在指令中创建的，并在最后被删除，纯粹是一种临时的视觉辅助。除了位置之外，还使用状态之间的 CSS 过渡为元素的开始和最终样式动态确定高度 + 宽度。每一种风格都可以有不同的过渡时间+定时功能来达到我想要的效果。多个元素可以同时移动到/从不同的位置，所以 JS/CSS 必须允许这样做。

如何在 ng-grid 中为新创建的行设置动画？

我想要的是当新数据从服务器进来时，它被添加到网格的开头，然后该行会发光几秒钟。

我尝试将 ng-animate 类添加到网格的 rowTemplate 中，但没有成功：

我的显示动画（直接从 ng-animate 文档中提取）是：

但这似乎不适用于网格。

有没有办法做到这一点？

这是我尝试的 Plunker http://plnkr.co/edit/iR9voQaFRREi0pjNLQgc?p=preview

我<ul>在底部添加了一个以显示我想要的行为（并证明 ng-animate 正在工作）。