问题标签 [ng-animate]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
3570 浏览

angularjs - 使用 AngularJS 和 ng-animate 在列表中移动项目的好方法是什么?

我希望能够重新排序列表,现在我在每个项目上都有按钮可以在列表中上下移动它们。我想用来ng-animate使项目顺利移动,但我只能找到-move动画,而且显然只适用于两个交换位置的顶部元素。我无法让它看起来正确。这是我到目前为止所拥有的:小提琴

我想我不确定-move. 我正在交换两个人的位置,但它似乎只影响顶部的一个。我希望它看起来像他们正在被交换。在示例小提琴中有一个复选框来创建新对象而不是移动现有对象来触发 -enter 和 -leave,也许我可以结合这两种方法:

  1. 用于-move最上面的人(以前在下面),动画相对位置向上
  2. 通过-enter创建一个新对象,为相对位置设置动画,用于最底层的人

有没有更简单或更好的方法来做到这一点?

其他想法:像 jquery-ui 的拖放功能会很好,但我不想包含它并找出是否可以让它与 AngularJS 一起使用。

0 投票
1 回答
9937 浏览

angularjs - 在 AngularJS 中使用 ng-animate 向左/向右滑动

当分别单击左/右按钮时,我真的很难将 AngularJS 中的内容滑动到左/右。

我知道它可以用 ng-animate 来完成,但我不确定如何在我的 AngularJS 代码中做到这一点。

下面是我的代码。如果您能帮助我,我将不胜感激。

HTML

JS

谢谢。

0 投票
2 回答
2290 浏览

css - ng-repeat 中的 ng-animate 不起作用

我的任务是为项目列表创建级联效果(每个项目都比另一个项目晚几分之一秒)。所以你可以想象当我发现时我是多么兴奋ng-animate。我已经用 填充了我的列表ng-repeat,所以看起来就像添加和修改 CSS 一样简单。这就是我的目标:如何在 ngRepeat 中延迟 ngAnimate

但它似乎并没有真正发挥作用。有任何想法吗?这是我的小提琴示例:小提琴 ng-animate

html

css

正如您在我的小提琴中看到的那样,它在运行时没有做任何事情。

0 投票
1 回答
6438 浏览

javascript - Ng-animate 不能在 AngularJS 中工作?

我正在使用 Phonegap 和 AngularJS 开发移动应用程序。为了方便起见,我目前只是在本地 wampserver 上开发和测试。

我正在尝试ng-animate开发我ng-view的 , 以便为类似于移动应用程序的视图更改设置动画。我遵循的任何指南或我使用的任何代码似乎都没有做任何事情。没有错误或动画。

这是我当前的 ng-view 代码:

这是我当前用于该 ng-animate 的 CSS:

然而,根本没有错误或动画。关于我做错了什么或如何让动画工作的任何想法?谢谢。

0 投票
1 回答
3453 浏览

javascript - ng-animate 在 angularjs 1.1.5 中不能与 ng-show 一起使用

我正在测试最新的 angularJS 版本 1.1.5 中的动画,它似乎无法正常工作。请检查这个小提琴

html:

CSS:

AngularJS:

但是,当我切换回 1.1.4 版时,它工作正常,但有另一个错误,他们说它已在 v1.1.5 中修复。现在这令人困惑。他们用更新的错误修复了以前的错误?无论如何,任何帮助将不胜感激。

0 投票
1 回答
1661 浏览

css - ng-animate 之后如何保持 CSS3 动画状态?

我正在尝试使用ng-animate+ CSS3 转换来更改 div' 状态。

我的动画与这个 CSS 配合得很好,除了动画完成后 div 不会保持其大小 + 颜色。

我已经尝试过使用animation-fill-mode:forwards;,但它的状态仍未保留。

jsFiddle

0 投票
1 回答
11983 浏览

angularjs - 当状态参数更改时,ng-if 上的 ng-animate 会“进入”而不是“离开”

在我的一个部分中,我这样做:

$state.includes 直接来自 angular-ui 路由器示例。当然,我正在使用角度 ui。

这是我的 appState 函数:

很普通。

当为每个新的 stateParam 重新加载部分时,ng-if 会创建一个新的 DOM 元素(带有新的 Hash $$)。而且每次调用“进入”动画都没问题。但是被破坏的 DOM 元素并不是在调用“离开”。

如果我没有做错任何事情,那么我应该要求一种更好的方法来做到这一点 - 也就是说,如何使用新参数为重新加载的视图设置动画......

谢谢!

========== 更新 ========== 这是一个 JSFiddle。没有从上面的代码中借用很多东西,但我很确定这一点。http://jsfiddle.net/morgs32/xPxkX/1

0 投票
2 回答
2954 浏览

angularjs - Angularjs ng-animate fadein 但它消失了?

HTML:

CSS:

我正在尝试为弹出窗口设置动画,使其淡入淡出。淡入有效,但在淡入动画播放后它又再次淡出。如何让它保持淡入淡出?

小提琴:

http://jsfiddle.net/6Xyys/

0 投票
2 回答
17034 浏览

javascript - AngularJS 中的动画 ng-show

我试图让一个 ng-show 元素在它变得可见/隐藏时进行动画处理。但它就像一个正常的 ng-show,即显示/隐藏。

我找到了这个例子:http: //jsfiddle.net/Kx4TS/1/ 工作正常。

但是,如果我使用相同的 ng-animate 属性和相同的 css,它在我的情况下不起作用。还有什么我需要做的或动画不起作用的情况吗?

我的代码如下所示:

而CSS是:

另外,是否可以让 ng-animate 做 jquery slideDown / slideUp 动画之类的东西?

0 投票
1 回答
5190 浏览

angularjs - 使用 ng-animate 为下一张/上一张幻灯片提供 2 种不同的动画

在我的例子中,ng-view是一个带有箭头的滑块,用于显示下一个模板和上一个模板。目前它有一种类型的动画用于模板之间的过渡。

我想扩展行为以根据单击的箭头执行不同的动画。单击“下一步”箭头应该执行slide-forward-enter&slider-forward-leave动画,而单击“上一个”箭头应该执行slide-reverse-enter& slider-reverse-leave

如何做到这一点?