问题标签 [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 投票
0 回答
2492 浏览

angularjs - 带有 ng hide/show 和 ng-animate 的轮播幻灯片效果?

我有一个滑块型旋转木马,带有两个可以左右滑动的部分容器。在我开发的版本中,我在一个部分容器中有图像。我遇到的问题是因为我来自服务器的图像需要一段时间才能加载我发现当用户单击后退按钮时,页面再次被添加到 DOM(由于 ng 切换)并且必须重新加载图像。

我的问题:有没有办法使用 ngif 或 hide/show 来代替它,以便页面只是设置 display: none 时隐藏,以便当前未显示的页面容器不会从 DOM 中删除?

Plunkr在这里:链接

我从几天前访问的博客中制作了上面的示例,我似乎再也找不到了,但是上面的示例使用 ng-switch 方法工作。

0 投票
1 回答
425 浏览

angularjs - ngAnimate 用于显示但不隐藏

我有一个 ngAnimate 可以在显示时将卡片滑入,然后在隐藏时滑出。滑入作品,但滑出没有动画效果。

html...

而CSS是

我正在运行 6 月 3 日的 1.1.5

0 投票
1 回答
1288 浏览

angularjs - 带有 ng-show 指令的角度 ng-animate 指令

我无法让 ng-animate 与 ng-show 指令一起使用。这是一个 JSBin 简化示例:

http://jsbin.com/uquzal/1/edit

出于某种原因,我的 CSS 类 .show-animation-setup 和 .show-animation-start 不起作用。有任何想法吗?谢谢!

0 投票
0 回答
135 浏览

angularjs - ng-show stop 与 ng-animate 一起使用

我开始使用 AngularJS,我尝试使用 和 制作一个带有简单动画的选项ng-showng-animate。您可以在此处查看简化代码:Plunker

当我在没有ng-animate指令的情况下尝试它时,它可以在面板之间正常切换(当然没有动画)但是当我尝试使用动画时,ng-show指令仅在第一次工作。

0 投票
2 回答
2097 浏览

javascript - ngShow 上的 ngAnimate 不起作用

我正在尝试使用 ngAnimate 执行动画菜单。

主页.html

样式.css

ngShow 和 Hide 效果很好。但是动画没有被触发。

我已经更新到 Angular 1.1.5。我从角度文档中发现,CSS 的语法发生了变化

我还尝试了具有相同结果的新语法。

任何帮助表示赞赏。

0 投票
2 回答
8805 浏览

javascript - 使用 angularjs 列出重新排序动画

我正在 angularjs 中开发一个项目,该项目有一个实时更新的对象列表,每次更新都会重新排序。我想让这些对象从它们的开始位置平滑地移动到它们的结束位置,例如,当列表重新排序是:

A 和 B 将分别下降一个位置,C 将上升两个位置,速度是原来的两倍。当您手动操作 DOM 时,这很容易完成 - 如果您通过更改其 style.top 来移动列表元素,您只需放置

进入元素的CSS,它会自动发生。但是,如果您使用 ngRepeat 来显示列表,则此技巧将不起作用,因为(据我所知)角度实际上重新创建了构成列表的 DOM 元素以进行更新,而不是移动 DOM 元素。

不幸的是,我发现很难用角度动画重现这个功能。我遇到的问题是角度移动动画似乎不知道每个元素的起始位置。使用 ngAnimate 指令,您可以在元素移动时自动在元素上设置一个 css 类,例如模拟它淡入或淡出。但是你没有关于元素曾经在哪里的信息,所以你不能从它的旧位置平滑地移动它——它只是被传送到新的位置,你必须让它在那里跳舞。据我所知,javascript 动画也是如此 - 角度将其传送到位,然后将其传递给您的函数,而无需任何历史信息。

有没有一种方法可以在不放弃框架并自己处理 DOM 操作的情况下实现上述平滑的重新排序动画?

0 投票
1 回答
608 浏览

angularjs - Angularjs 动画 - 禁用某些 ngRepeat

是否有可能以某种方式完全禁用某些 ngRepeat 指令使用的动画?

我还没有定义任何动画,但是当加载 ngAnimate 模块时,自动延迟从 ngRepeat 中删除 DOM 元素。

0 投票
0 回答
644 浏览

angularjs - 从 angularjs ui (bootstrap) 和 ng-animate 开始创建类似于 boostrap-application 向导的向导的好地方

我对 AngularJS 很陌生,想创建一个向导,类似于此处找到的向导(https://www.google.com/url?sa=t&rct=j&q=&esrc=s&frm=1&source=web&cd=1&cad=rja&sqi =2&ved=0CCkQFjAA&url=https%3A%2F%2Fgithub.com%2Famoffat%2Fbootstrap-application-wizard&ei=ZSomUtrZN_ShsQTy3ICIDQ&usg=AFQjCNGGfJ85a77baLTojgaOHUK0miVHHg&bvm=bv.51495398,d.dmg ) 使用AngularJS UI和ng

任何帮助将不胜感激。

谢谢,梅尔罗伊

0 投票
2 回答
4861 浏览

angularjs - 如何在 Angular 中使用 ng-view 动态设置动画?

我正在使用 ng-view 使用动画(角度 1.2RC1)在视图之间转换。为了确定动画应该采用的方向,我在调用我的位置更改之前在 ng-view div 上插入一个向左滑动或向右滑动的类。离开动画(首先运行)有效,但随后从 ng-view div 中删除了我的类。

我使用一个服务来确定是向左滑动还是向右滑动如下:

它更新了 ng-view div 中的类:

看起来好像 slideView (ng-view) 类已经被缓存并在完成后刷新,所以我想知道如何更新缓存或更改我的方法?

非常感谢您的帮助。

http://jsfiddle.net/RoryOSiochain/BfJWf/

在小提琴中手动将向左滑动或向右滑动的类插入到 slideView 中可以正常工作。

更新:希望我上面对 Jquery 的使用不会混淆这个问题,使用 ng-class 和 jQuery 都返回相同的结果/体验。

0 投票
0 回答
829 浏览

javascript - 当使用 ng-animate 更改模型时,如何让模型淡入/淡出?

我的网页上有一个显示最新项目的元素。每隔几秒钟,我就会在 items 数组的顶部添加一个新元素,我希望旧元素淡出,新元素淡入。

问题是我的代码目前没有在新项目中淡出(它正在淡出旧项目)并且正在推下旧项目,我希望旧项目在其中淡出,一旦动画完成,新项目将淡入同一个地方。

HTML

JS

CSS

我在这里有一个非常简化的版本:http: //jsfiddle.net/ErhQB/

在我的真实应用程序中,“刷新”按钮是一个超时(并且 $scope.refresh 中的代码包含在 $apply 中)。

我很确定我做错了,但我不确定如何触发动画事件,或者我会创建一个 $scope.item 模型,我会用我想要显示的项目进行更新,但我不确定如何将其与 ng-animate 一起使用(或任何其他方式)。

感谢您的任何帮助,您可以提供!