问题标签 [angular-animations]

我写了 plunk 来说明我的问题：LINK

我需要为父组件制作动画，同时我想在子组件中制作一些动画。似乎角度正在阻止子组件上的动画，然后在父动画结束后简单地跳转状态而没有任何过渡。

有没有办法让动画并行工作，或者至少在不使用回调的情况下进行链接？

我正在开发一个 Angular 响应式应用程序，在移动设备上它有一个抽屉。

我喜欢 Angular 中的 Web Animations API 实现，但是我找不到可以根据我的媒体查询断点配置动画的地方。

我所能找到的只是通过我的 css 表取消动画，但这让我开始在我的项目中的不同位置传播代码，我不确定这是否是我想要做的 Angular ......

现实生活中的例子

我的应用程序抽屉使用此代码制作动画

drawerOpened是按下应用程序菜单按钮时切换的布尔值。

我的组件看起来像这样：

我取消动画效果的CSS 代码

除了在我的 css 代码中操作所有内容并禁用 Desktop BreakPoint 上的 css 属性之外，是否存在某种在 Angular 上下文中执行此操作的方法？

谢谢！

我在 Angular 4 项目中创建了以下动画：

我已经使用装饰器的host属性将动画附加到我的组件上。@Component

现在，我希望动画在两点触发： 1. 当组件初始化时，也就是当我到达适当的路线时 2. 当我离开那条路线并导航到另一条路线时

第一种情况完美无缺，但第二种情况却没有。我在这里错过了什么/做错了什么？

根据 Angular 动画包中的查询函数文档，您可以提供一个可选参数limit。据我了解，limit: 5只有找到的前五个元素会被动画化。

当我使用querywith 时limit: 1，只有第一个元素是动画的，但是对于任何其他数字，所有元素都会被动画。

看到这个笨蛋

一旦我为我的数据创建了服务，动画就会停止工作。看起来这是因为当页面最初加载时，ng-repeat 中没有元素（因为它正在获取数据）。似乎与THIS和THIS类似：

错误：

动画：

HTML：

现在在你说之前"put in { optional: true } like the error message says"......我做到了 -它消除了错误消息，但实际上并没有使动画工作：

请记住，在将数据从应用程序组件中取出之前，这一切都有效。数据在那里，应用程序正常运行，只是这个动画不再起作用。

应用程序模块：

路由模块：

创建投诉组件：

动画.ts

我想在显示组件时添加动画（淡入）。我看到我的路由正在工作，但它没有淡入。我将动画时间设置为 5 秒，但我的组件会立即加载，忽略完整的事务。

我在这里想念什么？

我正在使用 Angular 4，使用 angular-cli。

问题： Angular 4 - 使用角度动画淡入路线更改视图

问题：

目前，视图在网站的加载中淡出，但在路线更改时不会。我希望视图总是在路线变化时淡入。

这是我的 HTML：（可能问题就在这里？？？）

这是我的应用程序组件：

这是我的动画（我导入）：

我只想让视图在路线更改时淡入淡出。我已经正确设置了组件，但我认为需要正确设置动画语法。

这是我目前的动画尝试。我将此动画导入到我的组件中：

这是我导入过渡的组件之一：

我想为特定的状态变化制作不同的动画。我基于此： https://scotch.io/tutorials/animating-angularjs-apps-ngview 它工作正常，但我想要这样的东西：

• 状态从 A 更改为 B - 从左到右滑动视图
• 状态从 B 更改为 C - 从右向左滑动视图
• 状态从 C 更改为 A - 从上到下滑动视图
• 否则 - 从下到上滑动视图

目前我有这样的东西 - 所有视图都从右到左移动。当我在我的应用程序中单击“返回”按钮然后.main-app添加类但我仅在元素.back上具有正确的动画（从左到右）并且具有与往常一样的动画（从右到左）.ng-leave.ng-enter

我试过这样的事情：

但是使用这个脚本仍然只有.ng-leave元素像我想要的那样工作，.ng-enter有默认动画。

我想创建一个基于变量的动画。例如，有一个宽度为 0px 的 div 并且在单击事件时以动画方式更改其宽度，但其新宽度的大小基于来自单击事件函数的参数。此外，它应该从其当前位置设置宽度动画，例如，如果它的当前宽度为 50 像素，新宽度为 100 像素，那么动画应该以 50 像素而不是 0 像素开始。

//事件

基于变量使用动画的建议方法是什么？