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

javascript - AngularJS:如何有条件地应用视图动画?

我的问题可能有点力量,因为我还没有发现任何其他类似的案例。

我想执行视图动画,但并非总是如此。到目前为止,我有 .css 格式的动画:

因此,当我从一页转到另一页时,它会被执行。

我不希望应用动画视图的确切情况是在我有一个 ScrollSpy Bootstrap 侧边栏工作的页面中。由于它在视图中,我不得不使用一个函数来做锚链接:

当这个函数被调用时,它会触发视图动画。在这种情况下,有什么方法可以防止触发视图动画吗?

非常感谢。

0 投票
1 回答
442 浏览

angularjs - $animate.cancel 没有预期的行为

我正在尝试使用 angularJS 的取消功能$animatehttps ://docs.angularjs.org/api/ngAnimate/service/$animate最新稳定版本:1.3.2

但要么我无法理解它应该做什么,要么它没有预期的行为:

我有一个这样的自定义动画:

所以一个基本的 CSS 转换。除此之外,我还有以下 CSS 过渡:

所以第一个奇怪的行为:我收到promise.$$cancelFn is not a function来自https://github.com/angular/bower-angular-animate/blob/master/angular-animate.js#L1233的错误

见小提琴:http: //jsfiddle.net/q1L9ycsd/6/

所以我稍微改变了代码:

所以现在我没有那个错误但是动画没有停止但是动画的回调被执行了。这是否意味着我必须在那里手动停止动画?

见小提琴:http: //jsfiddle.net/524nfp0o/2/

我也尝试在一个单独的事件中取消动画,结果相同,见小提琴:http: //jsfiddle.net/0o24zw02/

那么 1. 为什么第一个小提琴中的错误?2. 如何真正停止动画?

谢谢!

0 投票
1 回答
259 浏览

angularjs - 使用 AngularJS 为 DOM 元素设置动画(easeOutCirc)

如何在 AnguarJs 中编写这段代码?

特别是本例中使用的动画部分(easeOutCirc):

$(document).ready(function () { function addCircle() { var $circle = $('<div class="circle"></div>'); $circle.animate({ 'width': '300px', 'height': '300px', 'margin-top': '-150px', 'margin-left': '-150px', 'opacity': '0' }, 4000, 'easeOutCirc'); $('body').append($circle); setTimeout(function __remove() { $circle.remove(); }, 4000); } addCircle(); setInterval(addCircle, 1200); });

http://jsfiddle.net/Y3r36/311/

0 投票
1 回答
168 浏览

angularjs - angularjs 指令显示项目列表 - 想要通过单击该行的按钮动画删除项目

我有一个从服务器获取项目列表的指令。

(function () { '使用严格';

“actionItemChecked”方法通过每行的按钮单击(ng-click)连接到 html。我希望能够提供一些动画,同时从数组(和屏幕)中删除它。据我了解,我应该使用链接进行 DOM 操作,但我不确定如何判断何时应该对它进行任何操作。

我应该在链接而不是控制器中有“actionItemChecked”方法吗?如果是这样,它如何连接到每一行?

我看过

如何使用指令在angularjs内的列表中添加和删除项目时触发jquery动画?

删除元素时的angularJS通知

但看不到该怎么做。

0 投票
0 回答
91 浏览

javascript - Angular js ui 路由器动画过渡

有没有一种标准方法可以在角度 ui 路由器转换中制作动画?当 UI 视图发生变化时,我正在寻找滑动动画。

0 投票
1 回答
24390 浏览

angularjs - 角度淡入和淡出 - 没有 CSS 的标准方式?

与 jquery 相比,我发现制作角度动画非常困难。有很多版本的角度动画淡入和淡出,我从博客/教程/等中找到了它们,其中一些是旧版本的 angular。当新版本的 Angular 出现替换旧版本时,它似乎非常不一致。我看不到任何标准的做法。因此,我不知道从哪里开始。

我只是在单击按钮时淡入表单或 html 文档。

html,

角,

有任何想法吗?

0 投票
1 回答
631 浏览

angularjs - 使用 history.back() 时的不同动画

我创建了一个基于 AngularJS 的网站。每个页面都有自己的模板和控制器,并包含ng-view在主布局中。

但是我对不同页面之间的动画有疑问。如果向前导航,我希望它们从右侧飞入(并向左侧消失),反之亦然(从左侧飞入,向右消失),当用户点击浏览器或 history.back 的后退按钮时() 在 JS 代码中触发。

我该怎么做呢?

我已经设法通过将动画分配给类ng-enter和来定义动画ng-leave,但是当按下后退按钮时它们不会改变,即最后一页从右侧进入而不是从左侧进入。

我还尝试将向后动画定义为默认动画,并ng-view在我想向前导航以使用正确的动画时动态更改元素的类,但是要重置这个临时类,我(认为我)必须使用在 X 毫秒后(动画完成时)简单地重置它的计时器。不幸的是,当用户快速/在前进动画期间按下返回时,这会导致错误。

0 投票
1 回答
120 浏览

angularjs - Angularjs动画不起作用,我遇到了死胡同

这是我的代码,如果可能的话,你可以看看。那里没有任何官方信息,我只是将这段代码放在一边以备后用。

切换工作正常,但我尝试了所有可能的方法来让动画正常工作但没有成功。有人可以帮我解决这个问题吗?非常感谢!

0 投票
1 回答
590 浏览

angularjs - Angular JS 1.3 - 动画 Ng-Repeat 和 Ng-Show 元素

我有一个ng-repeat项目清单。任何时候只显示其中一项,其余的使用 隐藏ng-show

我使用循环遍历元素$interval

我想用淡入和淡出效果为元素之间的过渡设置动画。我尝试使用

但这似乎不起作用。

如何使用 Angular 1.3 实现这种动画效果?

JSFiddle

0 投票
1 回答
1622 浏览

angularjs - Angular - 动画 ng-show

我有这个使用 Angular 和 Bootstrap 的简单 HTML 标记:

还有这个小的 Angular 控制器:

请参阅此 JSFiddle:http: //jsfiddle.net/dennismadsen/1hr9q1ra/1/

当面板显示/隐藏时,如何在面板上添加动画?