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

angular - Angular2 Animation - 动画不透明度,但不是显示属性

我想用 Angular2 动画显示和隐藏我的模态组件。目前这是我的代码:

问题:目前显示块在200ms后设置。所以你看不到动画的不透明度。显示应在事件后直接设置。

这个怎么做?

0 投票
6 回答
13837 浏览

html - Angular 2 - 动画过渡不起作用

我需要两种颜色之间的过渡OnClick。现在,这是我的代码:

打字稿

HTML

这确实改变了background-color它应该的。然而,这种变化是即时的,而不是过渡。

我正在使用最新版本的 Chrome。

0 投票
1 回答
1029 浏览

angular - 参数变化时在组件上触发动画

我试图在组件的参数更改时触发动画,但只能使动画在组件第一次被路由到时执行。所有后续导航到具有不同参数的该组件都不会触发动画。

例如,请参见这个 plunker

从导航时

动画正在执行。如果只有 ID 更改,例如

什么都没有发生。我错过了什么或者这是预期的行为?

0 投票
0 回答
636 浏览

javascript - 如何在Angular2中的每个动画之间进行延迟

我在这个plunkerAngular2中对动画示例进行了一些更改

我想以一种方式制作动画,当我单击Add All HerosRemove All Heroes每个项目在上一个项目中出现或消失时,现在它们都彼此来或去。我不知道如何在 angular2 中进行延迟。

此站点中的某些列表list演示http://ionicmaterial.com/

附言。有时done我可以在上一个完成后添加每个项目,但我希望它们在上一个仍在动画时延迟开始

0 投票
0 回答
172 浏览

angular - 在项目更改时运行 Angular2 动画

我有以下代码:

每当 selectedItem 发生变化时,我想在项目之间进行平滑过渡。

我决定从文档中尝试这个:

但不幸的是,动画不会触发,似乎该项目没有从视图中删除(无效),但只会发生变化。

有没有办法设置动画在项目更改时触发?

0 投票
1 回答
109 浏览

angular2-animation - 角度 2 中常见位置的动画

我们可以在角度 2 中的一个共同位置制作动画吗?我是角度 2 的新手,正在尝试实现一个动画。发现在不同的页面上需要相同的动画。有没有办法可以在一个共同的地方编写动画并导入它?如果我问了什么非常愚蠢的问题,请原谅我。:)

编辑问题以获得更好的清晰度:sample plunker我需要在 2 个组件中使用这种动画。我是否需要每次在该组件中编写此动画,我可以在某个常见的地方(模块或组件)编写它并导入它。

0 投票
1 回答
117 浏览

angular - Angular 2 有没有办法访问动画元数据中的组件逻辑或元素样式值

基本上我需要知道的是有没有一种方法来计算从递归树动态创建的组件的高度。所以很明显我不能在我的元数据声明中使用树,但我可以像这样在 *ngStyle 目录中计算它的高度

因此,假设我的动画状态将最大高度从 *ngStyle 指令计算的 1 更改为 0,以创建 slideUp 效果。但是有没有办法访问动画元数据中先前计算的值。

0 投票
1 回答
1735 浏览

angular - ng2-page-scroll 不起作用

我有一个 angular 2 应用程序,我正在尝试使用 ng2-page-scroll 实现一个非常简单的动画滚动。

根据 read.me,我应该能够 npm install 它,将其导入到我的 module.ts 文件中,然后使用该指令。

我已经做了所有这些,但我什么也没得到。

有没有人用过这个包并让它工作?

这是我的导入:

我已将其正确添加到模块“导入”部分...

这是我与指令的锚链接:

我的锚元素有 id="test"

有什么想法吗?

0 投票
1 回答
2324 浏览

angular - 角度 2 动画。样式在过渡期间不适用

我正在尝试在分层结构中创建具有不同目录的 sidenav 菜单。它有两个动画,一个是显示目录是否打开的指针,一个是在打开子目录时向下滑动,在关闭时向上滑动的动画。这是 directory.component.html 的代码

这是我在 directory.component.ts 中描述动画的方式

我的问题是即使应用了 opacity 和 translateY 样式,zIndex 似乎也无法正常工作,因为子目录容器没有隐藏在父目录下,而是悬停在它上面。

0 投票
1 回答
1941 浏览

angular - Angular 2 - 控制动画关键帧

我正在尝试找到一种控制 CSS3/角度 2 动画的方法。

例如,查看官方 angular 2 动画文档中的以下代码,并进行一些更改:

我的问题是,是否有任何方法可以使用 angular 2 变量控制 css 值。一个例子是:

在动画组件中:

该演示显然无法正常工作,并且是为了说明我想要实现的目标而编写的。

我很想听听您是否有任何关于如何实现类似功能以控制动画关键帧属性的方法或建议。