问题标签 [angular2-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 回答
11037 浏览

javascript - angular2 组件中的多个动画触发器

我想在一个组件中定义多个动画触发器。这可能吗?

例如一个用于进入场景,一个用于悬停。或者我是否需要为这种情况定义两个组件(父子)?

item.compoent.ts

item.template.html

哦,有人应该创建标签“angular2-animation”

问候

0 投票
1 回答
431 浏览

javascript - How to animate one element on top of another element in Angular 2?

In Angular 2, how do I animate one element so that it's size and position will match that of another target element? The target element's size and position is not fixed, but can vary at runtime. Attached is a complete example using jQuery. As a bonus, I'm wondering if the animation can be done without using an ElementRef?

Codepen

See the Pen Animate element on top of another by Matthew Banz (@battmanz) on CodePen.

HTML

CSS

JS

0 投票
1 回答
1679 浏览

animation - Angular2从父组件触发动画

我正在尝试在子组件的隐藏元素上触发动画。简单来说,动画应该在元素出现时发生,然后每次用户单击父组件中的按钮时。

这是简单的代码:(试图 plunkr 它,但无法从角核心导入触发组件)

应用程序.ts

child.ts

我能够在它第一次出现时对其进行动画处理,但是当单击父组件的按钮 #triggerAnimation 时,我无法弄清楚如何再次触发此动画。我搜索了示例,但没有找到任何可以解决我的问题的方法。

谢谢你的帮助

0 投票
1 回答
1849 浏览

angular - 如何在 Angular RC.5 中制作路线过渡动画?

所以routeOnDeactivate已被删除。如何在运输途中动画路线?官方文件没有说清楚

0 投票
1 回答
873 浏览

angular - Angular2 动画 '* => void' 过渡未使用 *ngFor 组件项激活

Plunker 示例 https://plnkr.co/edit/uUs4U63mEItIRvL4nL7s?p=preview

我有一个在添加时会滑入ulli通知。我希望它们在被删除时滑出,但transition('* => void')似乎没有生效,它们只是消失而不是滑出。我在这里做错了什么?提前致谢。

编辑 这是一个扩展的 plunker 示例,显示它与本地列表一起使用,但在使用组件构建列表时不可用。

https://plnkr.co/edit/8WZGZu3tuSVBrzUZxBwE?p=preview

0 投票
5 回答
18615 浏览

angular - 如何在 Angular 2 中创建可重用的动画

我正在使用动画 API,我想创建一个可重用的动画,比如在顶级路由器视图的内容中滑动。我设法通过了时髦的元数据语法(一旦摆脱了使用元数据的疯狂想法,这实际上非常酷),以使动画大部分工作。

然后将其分配给组件中的顶级元素:

所以这行得通,但我怎样才能使它可重复使用?我不想将这些元数据粘贴到每个视图上。由于这是元数据,因此我不确定如何使其可重用。

0 投票
2 回答
3538 浏览

angular - 在 FormControl 的 valueChanges 事件上运行方法

我有一个 Angular 2 type-ahead 组件的以下代码:

效果很好,但是我正在尝试向此事件添加加载动画,即动画在 FormControl 的值更改时开始,并在返回数据时结束。

话虽如此,有没有办法使用如下代码进入这个方法链?

任何帮助表示赞赏。

0 投票
1 回答
697 浏览

angular - Angular2 RC4 动画触发器绑定错误

在模板中绑定动画触发器名称时出现错误。[@triggerName] 似乎不起作用。我错过了什么?

零件

模板翡翠

我得到的错误是:

无法绑定到“@showLoginTrigger”,因为它不是已知的本机属性

0 投票
1 回答
1837 浏览

angular - 如何在 Angular 2 中实现带有动画的指令?

我目前正在从事 Angular 2 项目。

该项目是使用 angular-cli v1.0.0-beta.15 生成的。

我现在正在考虑实现一个触发特定动画的可重用指令。由于目前缺乏这方面的文档,任何人有任何想法来实现这个吗?

0 投票
1 回答
3356 浏览

angular - 如何延迟每个 ngFor 项目动画

我怎样才能延迟 *ngFor 的每个项目以一个接一个地制作动画?

我的意思是这样的:

我是否需要每隔一段时间将项目添加到项目数组中,或者可能有一些更简单的方法?