问题标签 [angular2-animation]

我有组件PageComponent在不同的 url 上更新数据。我想在Page模型更改时制作动画。在我给定的示例动画中，仅在第一次PageComponent加载时才起作用。

当模型更新时，我应该添加/更改动画将起作用的内容？

page.component.ts

动画.ts

我在列表组件上使用角度动画，即滑入滑出动画。当列表很短时它工作正常，但是当我在列表中有超过 50 个项目时，动画就会滞后。这是什么原因？怎么解决？

我目前正在尝试 angular2 的动画，我想知道它们比标准 css 动画/过渡带来了什么具体优势。

例如，典型的材质设计卡片和带有盒子阴影的悬停效果。大多数 css 框架使用 :hover 和 css-transitions。使用 angular 2 动画有什么特别的优势吗？

我在某处读到某些 css 动画属性不会调用 GPU 那么多，因此存在一些延迟和滞后。angular2动画怎么样？

我有一个使用 angular 2 构建的测试应用程序，我已经成功地在路线更改之间应用了一个动画

但是当列表页面更改为项目页面时，我也想要不同的动画，例如单击英雄列表中的英雄，所以我这样做了

在单击项目后和导航之前，我尝试将状态设置为“childActivated”：

但没有效果。

如何在路线之间获得多个动画？

假设我有一个菜单链接或其他元素的列表，我想在它们的入口处连续制作动画。我想保持代码和概念尽可能干净。我如何在Angular2中做到这一点？

这个问题与这个问题相似，但不同之处足以创建一个新线程。

在处理angular 2 动画时，我无法弄清楚如何访问位于[project]\src\theme\variable.scss中的颜色变量。

假设[project]\src\theme\variable.scss在上面有这个：

现在在 Ionic 2/Angular 2 组件中，在@Component注释中，我有这样的东西：

现在我尝试了以下方法在字段中设置背景颜色[Some statement to define color active]：

• '#387ef5'=> 这有效；
• '($colors,primary)'=> 不工作
• 'color($colors,primary)'=>不工作
• 'primary'=> 不工作

每次它不起作用时，它都会抛出错误：Failed to execute 'animate' on 'Element': Partial keyframes are not supported.;

我很惊讶我无法访问“variable.scss”中的变量，因为定义的语句backgroundColor嵌入在style({}) 语句中。而且我想象style({})可以使用常规 CSS，这与我提到的另一个主题相反，其目的是访问 TypeScript 中的 CSS 值。

有没有人回答，或者可以就此启发我？

我有一行分为 3 列，带有 2 个按钮来隐藏左右面板：

当我单击左侧按钮时，我希望我的中间面板占据左侧的所有空间：

当我单击右侧按钮时，右侧的行为相同。如果我点击两者，我的中间面板应该占据所有空间。

当我只是在我的 div 上切换类时它运行良好（例如 col-md-7 => col-md-12）。现在我希望它是动画的，具有平滑的过渡。我尝试遵循此响应：Animate bootstrap columns 但我不想使用 JQuery。Angular2动画可以吗？

向组件添加动画时，我在控制台中收到以下错误：

Reduce of empty array with no initial value

我的角度版本：2.0.0

动画代码：

错误：

在角度 2 我可以做类似的事情

当窗口靠近大型组件中的元素时会触发。

我试图避免编写一堆带有自定义入口动画的组件。所以我想将样式设置为在 dosomething() 函数中引用 animate.css 。

我为我的应用程序的所有页面设置了路由动画，也就是说，每个可以路由到的组件都有

在他们的.ts档案和

在其模板中。所以理论上，每一页都应该从屏幕的左侧飞入并从右侧退出。这在桌面 Chrome 上完美运行，没有例外。

然而，在我运行移动 Chrome 55.0.2883.91（桌面：.87）的平板电脑上，动画只在某些视图上播放，而且似乎只在第一次访问该页面时播放。我在这里缺少移动浏览器的东西吗？

顺便说一下，这是使用 Angular 4.0.0-beta.1 的。