问题标签 [angular2-animation]

我正在尝试使用Angular 2进行页面过渡动画。基本要求是页面在进入和离开页面时应该有动画。进入页面时动画效果很好，但在离开页面到另一个页面时，它直接跳转到新页面而不执行离开动画。

目标动画从后面（沿 z 轴）进入页面并将其显示到最前面我是否在代码中遗漏了某些内容，尤其是在 transition.ts 中？我正在使用 Angular 2.3.1

你好。我有一个看起来像这样的小组件：

当点击搜索时，它变成：

在标记中有两个flex元素：用于标头 ( flex: 1) 和用于搜索。在搜索时单击我隐藏第一个并展开第二个。现在我想为过渡设置动画。

我从动画标题元素开始。首先我尝试动画width：

输入时几乎是即时的，Header单词向左滑动而不是缩小。（设置overflow: hidden标题完全破坏动画）

然后我尝试制作动画flex-grow：

进入时更好的动画，离开时几乎没有动画。将两者结合在一起：

普朗克

任何想法如何修复滑动标题？

当我更新传入的集合时，我正在触发动画*ngFor：

问题：当动画发生时，两者的颜色a和b显示，这使得动画生涩。

我试过了：

• 设置transform: scale(0)或动画开始display:none之前void => *
• void => *通过动画的持续时间延迟* => void动画

我想要：在新内容淡入/滑入之前（或同时）平滑淡入和/或滑出我现有的内容。

这是一个演示问题的 plunkr：https ://plnkr.co/edit/IDE6q6lJ84QI2Zirvn4P?p=preview

在 angular 2 中，我试图使用@angular/animations一个组件来制作一个<li>元素跟随鼠标(ondrag)并在(ondragend). 我对角度很陌生，并且非常迷茫解决这个问题的最佳方法是什么。我希望能够将我的组件中的字符串注入到动画中，但不确定这是否可能。请参阅下面的示例。

:enter第一次渲染组件时，动画会应用于元素。有没有办法防止它？

检查这个 plunker以获得简单的width动画示例：

我是一名初级程序员，最近开始学习 Angular 4。我正在尝试制作个人网站并想添加一些动画。

在页面的顶部，我有一个带有徽标的大屏幕。我希望这样当我单击此徽标时，主体的背景颜色会发生变化，但似乎该功能会触发元素。

这是我在 TypeScript 上的代码：（代码不会产生错误。它只是没有做我打算做的事情。）

当我将 [@changeBodyColor]="colorState" 放在 jumbotron 的 div 元素中时，动画可以工作，但显然只是改变了 jumbotron 背景颜色。当我将它放在 index.html 中的 body 元素上时，会触发该功能（登录控制台），但颜色不会改变。

我觉得这是 DOM 层次结构的问题。如果有人知道问题可能是什么，请告诉我！

如何在 Angular2 中删除 dom 元素时触发动画？

一切正常，从列表中删除项目，将项目添加到列表中，动画...除了删除项目时，列表项目被删除而没有动画。有什么见解吗？

这似乎是 Angular2 反复出现的问题，但据我所见，没有人真正有好的解决方案。

例如这篇文章：https ://www.bennadel.com/blog/3140-using-changedetection-with-animation-to-setup-dynamic-void-transitions-in-angular-2-rc-6.htm

我有一个 div 就像

isActive 和 topVar 是根据视图计算的（比如内容溢出，内容是动态的）。

所以我在 ngAfterViewChecked 中计算它们。

这当然给了我这个错误：

我明白我做错了什么，我的问题是，如何做对？

（如果我根据组件视图计算变量，我需要ngAfterViewChecked --> 我需要再次detectChanged，如果我每次都进行ChangeDetectorRef.detectChanges() --> 我将进入一个循环。 --> 我需要停止它的条件。感觉很老套和错误。

在 Angular 2 项目中集成Web 动画 js的正确方法是什么？我已完成此处提供的必要步骤。但是Firefox中的动画仍然不稳定。

我使用最新的 Angular cli（版本：1.0.3）创建了一个新的 Angular 项目，并通过编辑 package.json 中的依赖项降级了 Angular 版本。动画在 chrome 中正常工作。

我在这里缺少什么吗？

包.json -

这是我的组件-

模板 -

我正在尝试将 Angular 动画与变量一起使用，但我犯了一些我无法弄清楚的错误，

我想要完成的是在我的侧边栏的“li”元素上“移动”一个“标签”。这是我的 HTML：

我有 Angular 4.3.3，我尝试在动画中使用变量，这里是 sidebar.componet.ts：

这是我的动画：

我在控制台上没有收到任何错误，但选项卡固定在同一位置，

在此先感谢您的帮助。