问题标签 [angularjs-animation]

我已经搜索了数周来了解如何执行此操作，并且我了解了如何在元素“进入”和“离开”DOM 时使用角度动画和生成的 css 类（即在 ngRepeat 中）为它们设置动画。我不明白的是如何做简单的基于事件的动画以及如何“捕捉”他们的事件？

例如，我将如何仅使用 angular 和 css 执行以下操作？

我在页面上有两个 div（A 和 B）。两者都是 50px 高和 50px 宽，向左浮动，因此它们彼此相邻。我有一个绑定到 A 的 ng-click 指令。单击 A 时，它的高度应该转换为窗口高度的 80%（最好这应该能够设置为 HTML 元素的属性）。

同时B 应该反映过渡并最终达到相同的高度。另外.. 转换完成后，应该有一个<h4>Transition Done</h4>注入到 B.

使用 jQuery 之类的东西很容易做到这一点，但我正在尝试学习“角度”的做事方式。有人可以帮我一下吗？

我在角度动画方面遇到了一个奇怪的问题。我正在制作一个在屏幕之间转换并根据屏幕的“深度”改变方向的动画。

棘手的部分是有两个部分，一个是静态的，一个是移动的，这就是为什么我要这样实现它。您可以看到第一次工作正常，第二次工作不正常。ng-enter 不能很好地转换。

在这里你可以看到 plunker：

http://plnkr.co/edit/OC4rqA?p=info

我正在开发这个有角度的简单页面。我正在使用 Bower 安装我需要的组件，并且该应用程序曾经完美地工作。直到我决定利用 Angular 动画库。第一次我使用 Bower，它问我应该使用哪个“合适的”Angular 库：1.2.6（已经安装并工作）或 1.2.14。

因此，如果我选择 1.2.6，则在添加

是

未捕获的错误：[$injector:unpr] 未知提供程序：$$asyncCallbackProvider <- $$asyncCallback <- $animate <- $compile

如果我选择其他版本，问题会转移到似乎无法识别使用 ng-class 的代码。

我有一个 ng-class="testClass" 元素和一个列表元素：

我在animations.css中的位置：

加载页面时出现错误提示：

似乎第一个函数和angular的css钩子的使用不能在同一个ng-click中一起使用。

我可以为这两个问题中的至少一个找到解决方案吗:) ?..

我有两个 div，一个开始是空的，另一个有一些预定义的项目。单击一个列表中的项目时，另一个列表会将项目添加到其中。

我想要实现的是为一个列表中的项目设置动画，使其看起来物理移动到另一个列表。（我希望项目从右向左移动）。我不太了解 CSS 动画或 AngularJS 动画。在 jQuery 中，我可以在 div id 上调用 $().animate() 来修改属性。

我将如何在 AngularJS 中做同样的事情？

JS：

HTML：

这是我到目前为止的链接：

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

我将 angular-animate 与 angular filter 结合使用，以在无序列表中隐藏和显示广告。我的一切工作正常，但是当动画发生时，列表项突然“跳跃”。你可以在这里看到我的意思：

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

（单击其中一个过滤器链接或在搜索字段中输入内容。）

我理解它为什么这样做 - 因为列表项向左浮动，一旦中间项被隐藏，剩余的列表项就会移动以填充空间。我想知道的是，是否有任何方法可以使转换平滑，从而使它们动画到新位置而不是突然跳跃？

使用 AngularJS 动画实现翻转效果的最佳方法是什么？

我希望在点击时发生翻转效果。每次单击它时，它都应该翻转到另一侧。

理想情况下，我想，我正在寻找一个使用 Angular 动画的指令实现。

我在将动画应用到我的 ng-view 时遇到了困难。ng-enter 和 ng-leave 类似乎从未应用于视图。该行为似乎与没有动画相同。有什么方法可以验证动画功能是否确实有效，所以我可以判断这是我的代码问题还是我加载角度的方式有问题？

html:

CSS：

我的 AngularJS 应用程序有一个奇怪的问题；我的选项卡幻灯片中的动画使用 ng-include 切换，第一次不起作用，但在第二次或第三次时效果很好。

这是我在 plunker 上的测试代码：http: //embed.plnkr.co/a2x4vkTVgEUEt9mxWaVy/preview

看起来像 ng-enter 动画类，设置之前，模板上传。请帮忙。

我正在探索 AngularJS 中的动画，但在让交错的 CSS 动画正常工作时遇到了问题。添加新项目时它工作正常，但是当同时删除多个项目时，项目是从集合内部而不是从后面删除。换句话说，这些项目的删除顺序与我期望的相反。

HTML：

JavaScript：

CSS：

我在这里创建了一个记录问题的 JSFiddle：http: //jsfiddle.net/VNB7R/

这是一个已知问题还是我在我的 JS 代码或 CSS 中做错了什么？

我正在尝试添加一个指令，该指令在单击元素时对其进行动画处理，但我的指令中的代码似乎永远不会触发。

小提琴

html:

js：