问题标签 [web-animations]

我正在使用Web Animation API创建一个简单的动画，这样当用户在鼠标上移动时target，动画应该从左到右开始，当用户将鼠标移开时target，动画应该反转并且target应该从右到左。

目前，如果用户在动画过程中将鼠标移入/移出，动画会很生涩，而且我没有平滑的效果。

我想知道如何解决这个问题。

注意：目前我正在使用 Web Animation API。但是在使用 CSS 关键帧动画时也会出现同样的问题。

我还尝试使用以下解决方案来解决此问题，这改善了情况，但仍然存在问题。这是一个现场示例https://jsfiddle.net/x784xwoa/5/

谷歌和他们的开发者说你应该测试性能并获得接近 60fps，但这个工具似乎坏了，或者他们在这方面也做得很糟糕：

• 访问google.com和搜索某事
• 打开 chrome 开发者工具，
• 转到时间线 -> 按下记录（左侧的黑点）
• 滚动结果页面
• 停止录制
• 惊奇

即使这是一个没有任何花哨的动画或繁重的 JS 的页面，时间轴也是红色的，上面写着：

长帧时间表示卡顿。

为什么是这样。是谷歌有一些前端问题，还是录音工具坏了？

我正在关注本教程并web animation在我的ionic2项目中使用。

我在我的设置了动画@component：

我的html：

如果我(click)="toggleFadeTransform()"，我可以切换并且动画播放正常。但是如果我(click)="toggleFadeTransformOn()"，我可以this.fadetransformstate在控制台中看到正确显示，但动画永远不会播放。

为什么setInterval玩不好web-animation？我该如何解决这个问题？

我尝试使用 WAAPI 创建图像转换器。

有一个图片循环，其中延迟应该增加而 endDelay 减少，但它在迭代中不起作用：

经过两次迭代后，它似乎只是不规则地闪烁。

我将不胜感激任何与此作斗争的想法。

TIA 马蒂亚斯

我需要使用 Web Animations API 来“模拟”附加动画。

如文档中所述，尚不支持附加动画，getComputedStyle(element)建议使用。

我面临的问题是返回的matrix3dgetComputedStyle(element).transform可能不包含足够的透视信息，所以如果我使用作为开始关键帧，动画就不一样（红框问题）。

在这个例子中，蓝框有想要的动画，红框动画不正确：

我想知道： - 如果存在解决此问题的方法 - 附加动画的实现是否transform支持perspective.

谢谢你的时间。

我有一个使用事件发射器删除的子组件，我想在它的删除上添加一个动画。我的想法是从通配符状态动画到无效：

但是删除动画没有运行，任何帮助都非常感谢。

我正在尝试对 Angular 4.0.1 中的每个路由转换进行淡入/淡出。我看过无数的“滑入/滑出”教程，但这些对我没有用。

这是我的 app.component

零件：

HTML：

上面的代码不起作用，@RouterAnimation 是否应该是可变的并在组件加载时发生变化？

应用程序中的所有路由都由自定义路由服务（Router 的包装器）处理，我可以在每次 url 更改发生时向 app.component 发送广播，并延迟路由（:leave 转换的时间）？

我可以在 app-routing.module 中指定我想在哪里使用动画吗？

有谁知道这应该如何工作？或者在 Angular 4.0.1 中有一个具有复杂路由的工作示例（儿童而不使用 routerlink）

我想知道你是否熟悉Hippo Animator .. 这个软件可以很容易地创建网页动画，基本上你可以添加 html 按钮等。现在，目前我已经添加了一个按钮，并且在它的属性上我需要添加一个 On Click 功能，这样每当用户点击它时，它应该重定向到另一个站点位置。我尝试了几种方法，例如这种方法：

但是出现了一个错误，上面写着：

找不到变量位置。

请注意，我无法尝试document.getElementById，因为该软件不支持它...

这是我工作区的图片：

因此，如果您知道如何在此软件中添加可以将页面重定向到另一个站点的 On Click 功能，请告诉我。我真的很感激！谢谢 ：）

每当我更改属性的值时，我都想创建一个过渡效果。

我尝试执行以下操作

我假设更改属性会触发组件再次启动动画效果，但这并没有按预期工作

当使用缩放来更改包含文本的 HTML 元素的大小时，文本会在动画期间抖动，但前提是使用 JavaScript 库进行动画处理。

当动画速度较慢且文本较小时，抖动最为明显。我似乎无法弄清楚是什么原因导致它或如何摆脱它。

在 CSS 动画或使用相当新的 JavaScript Web Animations API 的动画期间不会发生这种抖动。在某些浏览器中似乎也没有出现。（在我的 iPhone 上）

为了轻松比较元素缩放动画的不同方法以及它们的显示方式，为了方便起见，我制作了一个CodePen。在检查之前，请注意以下几点：

1. 所有动画都使用某种形式或模仿transform: scale(num);动画的 CSS 属性，并且具有相同的缓动和持续时间，因此可以更轻松地进行比较。
2. 虽然抖动也出现在 macOS 上，但由于分辨率高，在配备视网膜屏幕的 Mac 上几乎不可能看到。
3. 我得到的结果反映了 Google Chrome 59 中 Windows 10 机器上的动画外观，尽管对我来说 Microsoft Edge 也显示了相同的结果。

所以我的问题是：在使用 JavaScript 为缩放属性设置动画时，如何防止文本抖动或变得模糊？如何使我的 JavaScript 缩放动画中的文本看起来像使用 CSS 时一样平滑？

您可能想知道为什么我不只使用 CSS。答案是因为我对 CSS 动画的有限性感到沮丧。我想使用超越简单贝塞尔曲线功能的高级缓动功能（如罗伯特彭纳的反弹和弹性功能），并在鼠标进入和退出元素时在悬停时使用不同的缓动。这完全是我自己的观点，但到目前为止，我发现这样做的唯一无痛方法是使用 JavaScript 库。除了与缓动相关的功能外，大多数似乎还提供了许多其他功能，使动画制作更加轻松。如果您知道获得我需要的所有功能的更好方法，请告诉我！