问题标签 [angularjs-animation]

我有 2 个表单，加载页面后，第一个显示，另一个隐藏。当我第一次单击添加按钮时，显示第二种形式的动画不起作用。但第一次点击后，我可以再次点击取消按钮和添加按钮，然后一切正常。我怎样才能让它也适用于“第一次点击”？

如果有人有兴趣，我正在尝试从以下教程中改编http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

我的 plunker 在这里http://plnkr.co/edit/02E8eQFHQVynK3mE1IMg?p=preview

html是

JavaScript 动画部分如下所示：

那是我的小提琴：

div 的旋转是一个翻转......不是平滑的旋转。

我使用最新版本的

考虑到最新 angularjs 的新动画功能，我必须如何集成

旋转的动画？

我目前正在使用 angular 1.2 rc3，我为我的 ng-repeat 项目使用了过渡。但是，我发现每当我更改 ng-repeat 的模型时，转换就会变得混乱。您会看到整个项目列表弹出然后消失。我想要的只是一个简单的淡出整个列表，淡入新项目列表。我怎样才能达到这种效果？

这是重现该内容的 plunker：http ://plnkr.co/edit/lnsxCySFGmUmAnYDqVm3?p=preview ://plnkr.co/edit/lnsxCySFGmUmAnYDqVm3?p=preview 只需添加几行，然后更改模型，您就会看到奇怪的行为。

谢谢。

非常简单的问题：在从范围中删除项目时AngularJS 1.2.x是否有可能（以及如何）ngAnimate触发？

这是一个示例 Plunker：

http://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview

代码：

脚本：

如您所见，单击“删除”按钮运行splice()在$scope.imgs. 我想对此进行动画处理，而不是让它消失。我正在使用刚刚从这个 Moo 年文章中复制和粘贴的转换，它在过滤范围时效果很好，但在从范围中删除时显然不行。

我有以下情况：我在 AngularJS 应用程序中使用 ui-router 进行路由。在一条路线中，不同的子屏幕有五个子状态。我想以类似轮播的方式为这些之间的过渡设置动画。

导航如下所示：

state A从到导航state B应该使screen A向左screen B滑出并从右侧滑入；state B从到导航反之亦然state A。

起作用的是仅在一个方向transform: translateX(...);上为屏幕过渡设置动画。enterleave

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都朝着正确的方向发展。

控制器功能（Coffeescript）：

模板：

我有以下html：

和CSS：

这是小提琴

我试图完成的是，当单击“某些标题”时，此 div 向左“滑出”，而另一个 div（带有项目）从右侧“滑入”。

我想使用 Angular + CSS3 来实现这一点，但我就是想不通。有人可以帮助我并解释它是如何工作的吗？

我在让 ngAnimate 与 ui-view 一起工作时遇到了重大问题。这些课程永远不会被应用。请帮忙：

鲍尔.json

索引.html

控制器

SASS

我正在尝试使用 Angular JS 1.2 制作高度动画。我有一个 plunker 这里有关闭项目的动画工作：

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

这里的关键是这个 CSS：

但我不知道如何让它工作以打开该项目。我显然在做一些脑残的事情——我错过了什么？

如何将 effekt 动画与 angularjs http://h5bp.github.io/Effeckt.css/dist/一起使用？

任何人都可以创建一个例子来使用 angularjs 吗？

所以，Angular 1.2 有完整的 ng-animate 支持，我一直在用它来进行页面转换——初始设置很简单，很棒。正向动画（从左到右），没问题。向后导航？问题。

从理论上讲，它只是有效：例如，请参阅http://codepen.io/ed_conolly/pen/aubKf。但是，我正在尝试使其适用于导航事件；例如，$locationChangeStart。

我观察到的是，当启动页面转换时，Angular 会创建第二个“ng-view”div，然后将 .ng-leave 类应用于旧的，将 .ng-enter 应用于新的。

我发现的（少数）示例告诉我只需将一个“后退”类添加到带有倒置动画的视图中，让它走另一条路。这有效......但不是真的。

我所看到的是“返回”类仅应用于新视图，而不是旧（ng-leave-ing）视图。

tl;博士：

• 我使用了错误的事件吗？是否有在第二个视图被创建和动画之前触发的事件，即在 $locationChangeStart 之前？
• 甚至可以通过事件来完成，还是我需要在导航事件上调用自定义助手？顺便说一句，这会破坏浏览器自己的历史功能。
• 甚至可以在香草Angular中做到这一点，还是我需要angular-ui？