问题标签 [angularjs-animation]

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 回答
173 浏览

angularjs - 在加载阶段阻止动画(AngularJS)

基于之前的问题,我决定升级到 Angular 1.1.4 并尝试使用动画系统。我在做我以前做过的事情时遇到了麻烦。当用户点击一个元素时,它会被添加到一个 ng-repeat 元素中。然后,该元素的动画将容器滚动到合适的位置以显示该元素。那部分工作正常。

有时我会替换所有元素并且我不希望发生滚动行为。以前,我通过在范围中放置一个变量并在我的自定义指令中查看该变量来管理它。然后我会在加载后设置一个超时来切换变量。现在使用动画系统,超时不再起作用。

我需要一种方法来在我的程序的某些活动期间打开/关闭动画的某些部分。我怎样才能做到这一点?

0 投票
1 回答
2619 浏览

javascript - 防止 angularjs 动画在加载时最初隐藏的元素上运行

http://codepen.io/cflynn07/pen/hbgxf
^ 示例

我有一个 angularjs 动画,我不希望它在页面加载时运行应该隐藏的元素。

现在,元素被显示,然后上滑动画发生并隐藏元素。

0 投票
1 回答
5061 浏览

angularjs - AngularJS 的不同转换

如何使用 AngularJS 启用不同的转换。可以说,我的 Web 应用程序中有一个侧边栏。如果用户单击一个按钮 X,侧边栏应该会很快消失,如果用户单击另一个按钮,侧边栏应该会慢慢消失。

我认为,这可以通过在其中一次单击后设置转换选项值,然后更改侧边栏的可见性状态(由转换指令观察)来实现。

但这对我来说似乎有点糟糕。有没有一种通用的方法可以做到这一点?

0 投票
1 回答
1545 浏览

jquery - AngularJS:指令:动画滑动页面并推迟控制器绑定

我试图弄清楚如何推迟默认控制器绑定,并且只在指令中应用它,一旦特定动画(自定义 - 不是 angularjs 动画)已经在带有内容的 DOM 元素上执行。我想要完成的任务就在这里,尽管它确实会立即替换内容 - 在滑动动画完成之前:http: //jsfiddle.net/scabro/hHy7s/27/

我需要能够推迟 $scope 绑定,直到页面容器完成向上滑动/动画,然后用控制器内的数据替换内容,完成后,向下滑动。

这是我目前拥有的:

HTML:

CSS:

JS:

0 投票
1 回答
130 浏览

javascript - ng-click 内 ng-repaat 动画,但事件不触发,为什么?

这是jsFiddler中的代码

正如您所看到的代码,当您单击添加按钮时,我将一个新项目推送到 $scope.p,并且 ng-repeat 中的每个项目都有一个事件绑定,所有事情都运行良好,但是当我添加属性“ng-animate”,事件不会触发。十分感谢!

0 投票
1 回答
1201 浏览

angularjs - 如何防止动画在最初隐藏的元素上运行?

我的问题与这个这个类似,但涉及 AngularJS 1.2.0 中的新动画。

基本上,我的注册页面上有一堆元素,这些元素最初是隐藏的,仅在特定表单元素无效时才显示(它们指向无效的表单元素并显示一条消息,例如“密码需要至少 8 个字符”) . 这些消息在显示/隐藏时淡入淡出。

但是一旦显示注册页面,元素就会可见并淡出。它们是短暂可见的(它们在屏幕上“闪烁”或“闪烁”,就像在需要 ng-cloak 的情况下一样)。

这是一个 plunker 来展示我正在经历的行为。在这个 plunker 中,我设置了一个基本路由(“登录”页面),其中包含一个框和一个用于切换框可见性的按钮。请注意单击运行时该框是如何淡出的?它应该被隐藏起来。(我故意将动画设置为慢速,以便您可以看到正在发生的动画)。

如何阻止动画最初发生?

我试过的:

  • 设置ng-cloak在动画元素上。
  • ng-cloakdisplay: none !important添加的规则一起使用。(见此
  • 在元素上设置display: none,就好像它是元素的“初始设置”一样。(见此

有趣的是,这个plunker 行为正常,动画最初没有出现。这个 plunker 不使用路由,并且控制器在 body 标签上显式设置。我想使用路由。

0 投票
0 回答
144 浏览

angularjs - 使用角度 $animator 更改元素的宽度

我有一个通过 Javascript 更改其宽度的容器。所以,我想用 $animator 为它制作动画。

我怎么能做这样的事情:

?

请注意,我没有 CSS 样式来更改它。我是用另一个容器做的,但在这种情况下必须使用 js。

0 投票
2 回答
9551 浏览

angularjs - 注入 angular-animate.js 时出错

注入时收到以下错误angular-animate.jsUnknown provider: $animateProvider from ngAnimate

这是我的 app.js:

这是负责人index.html

单独的引导程序加载正常。

我究竟做错了什么?

这是plnkr

0 投票
1 回答
435 浏览

angularjs - ngRouted templateURL 中 ngShow 上的 ngAnimate。第一次开始时阻止动画

我正在使用ng-show #animation

index.html: -

templateURL 包含:-

在上面的代码中,templateURL 文件在页面加载时不应显示或向上滑动。

请查看以下两个 plunkrs。

是预期的行为

是我们一起使用 ngAnimate 和 ngRoute 时得到的行为。

0 投票
0 回答
291 浏览

angularjs - Angular 中的分页幻灯片

我有一系列项目,我想在不同类型的过滤器上进行过滤。因为我有超过 2000 个项目,所以我想在页面之间进行分页,所以我创建了一个 startFrom 指令并使用了 angulars limitTo 指令。这一切都很好,但这是我的问题:

该页面使用下一个/上一个箭头在页面之间进行补间。因此,单击下一个按钮应该在现有的 div 之后注入一个新的 div,然后补间到新页面。当补间完成后,我想处理旧页面。我正在使用 Angular 1.0.8,所以我无法使用 ng-animate。实现这一目标的最佳方法是什么?

提前谢谢了!

编辑: 我试图将我的数据对象解析为一个新对象以创建幻灯片:

来自数据库的数据:

操作后:

问题是这太重了,因为每次过滤器更改时都必须重建对象。