问题标签 [angularjs-animation]

我是 AngularJS 的新手，但在问这个问题之前，我已经搜索并搜索了有关如何以 Angular 方式执行此操作的答案，但结果不足。

我想要做什么： 让视图触发[延迟]的子动画直到视图[父]动画进入或略微动画进入/退出之后。

我目前已经用 ui-view 设置了所有内容，并且页面动画进出没有任何问题。但是，如果我尝试延迟子动画或使其动画长于父动画的持续时间，那么它只会跳转而不是动画。

据我所知，这是因为 ng-enter 和 ng-leave 在父级完成动画后被删除，正如设计的那样。

我创建了一个 Plunker 来展示这个：http ://plnkr.co/edit/5iOb1j0l8lFaMZfrKIFh?p=preview

动画是通过 CSS 完成的：

如果您在页面之间单击，您会看到黄色框没有动画，因为它有 1 秒的延迟，而父级有 0.8 秒的动画持续时间。（您可以在 style.scss 文件中更改它）

那么，无论视图被引入和移除时的延迟或持续时间，我将如何让视图子动画化？

我在指令中有一个隐藏组件，但是当页面加载时，隐藏元素会在动画期间出现，只有当组件的模型设置为可见时才会触发。

在此示例中，我将组件永久设置为ng-hide="true"，当页面加载时，它仍会显示半秒。在我的实际程序中，指令要复杂得多，所以我将模板放在它自己的文件中，如果我只是把它放在一个字符串中，问题就不会出现。

我尝试将style="display:none"添加到模板的内容中，但后来它不会对模型更改做出反应。

覆盖.html：

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

我总是很难设置 AngularJS 动画，要么是因为我还没有“理解” TM ，要么是因为命名法颠倒了。我确定是前者。

例如，以下 CSS 有效，即。元素在显示时从左侧飞入，并在隐藏时飞回左侧。

但我不明白为什么负责显示动画的选择器被称为 ng-hide-remove。如果有人可以阐明命名法，我会发现将来设置动画要容易得多。

我是 AngularJs 的新手，所以我需要执行以下操作：

我有一个 div 和一个按钮，当我单击按钮进行 ajax 调用时我想要，当我完成时我想做：

1. 删除 div。
2. 或者添加一个新的。

我想学习如何使用 jQuery 动画（slideUp和）来完成它们（当然不是通过相同的点击slideDown）。

参考 $animate api， $animation 自 angular1.3 起支持回调承诺。

但我的代码不起作用

它回来了

我的角度和角度动画都是 1.3.0-beta.19
请帮忙！

编辑
我自己解决的问题。

因为自 v1.3.0-rc.0 起支持回调承诺，但不支持 v1.3.0-beta.19

我正在尝试通过组合对 addClass/removeClass 的调用来制作动画序列。

动画结束后调用“removeClass”方法来删除动画并开始一个新的动画。但由于某种原因，什么都没有发生。我想弄清楚为什么它不起作用？为什么类不被删除？

完整版可以在这里找到

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

我试图在切换时向上/向下滑动表格行ng-show。我正在使用 AngularJS v1.3.0-rc.5 并ngAnimation在我的应用程序中包含了模块，但它总是切换，没有动画。难道我做错了什么？

HTML 代码如下：

用于切换的 JavaScript 非常基本，如下所示：

CSS动画代码如下：

使用 AngularJS 和 ng-class，我试图在类在三种可能的状态之间变化时制作动画。我有一个可以处于三种状态的 div，由 div 上的类表示。状态定义如下：

1. <div class='myDiv'></div>
2. <div class='myDiv foo'></div>
3. <div class='myDiv bar'></div>

请注意，类foo和bar是排他的含义<div class="myDiv foo bar"></div>是不可能的。我正在使用 ng-class 指令，如下所示：

<div class="myDiv" ng-class="{foo: first, bar: second}"></div>

控制器确保布尔值 first 和 second 可以同时为假但不为真。

我发现 ngAnimate 正确检测到状态 1<-->2 和 1<-->3 之间的 css 转换，但不能从 2<-->3 检测到。我尝试为.myDiv.foo, .myDiv.bar,.myDiv.foo-add-active等类选择器添加 css 转换代码，但是 ngAnimate 没有检测到它们（意味着它没有添加 -add 和 -add-active 类）或者添加了动画类但是没有发生过渡。

这是一个演示问题的jsFiddle的链接。单击任一按钮，然后重新单击它会显示工作转换。单击任一按钮，然后单击另一个按钮显示缺少转换。

ngAnimate 是否会正确拾取一组神奇的转换？或者这是我不需要使用 ng-class 并编写自己的自定义指令的情况？

我有一个指令触发一个动画，当从 / 位置移开时，该动画将 div 移高 200px。只要 / 位置是我们的起点，这很好用，但是当从另一条路线开始时，仍然到达 addClass，但没有执行。

动画代码

我在这里做错了什么？

我目前正试图找出谁破坏了我的脚本，我还是 angular-animate.js。我很确定是我，但是，嘿，奇迹可能会发生，这次我可以是无辜的。

这是我的 HTML 代码：

这是我的练习 7.js：

这是我得到的错误：

有趣的是，我使用的不是“angular-animate.js”，而是“angular-animate.min.js”。我也有本地地图文件，但它指向缩小版本。所以不可能是因为那个，对吧？

在我的 Chrome 控制台中，我打开了错误消息，文件似乎是空的（即使它不存在）。

所以我下载了 angular-animate 的未缩小版本，我终于可以看到它在抱怨第 992 行：

我无法理解这个问题，我正在与你们联系。我做错什么了？我可以看到 angular-animate.js 大约在 21 小时前更改了，但我不确定这是否与我的问题有关。