问题标签 [web-animations]

我有一个场景，我正在尝试使用 Promise (bluebird) 将 web 动画链接在一起。

网络动画是指element.animate风格的动画。我创建了一个通用的 Animation Promise 包装器，如下所示：

然后我将一个元素、数组和计时对象传递给该函数。动画执行，promise 解决。唯一的问题是最终结果看起来有点难看......

为什么丑？因为它基本上看起来像回调。将其中的五个链接在一起，似乎会留下一个不可读的代码块——这与Promise似乎……承诺的内容背道而驰。

我想另一种选择是返回一个函数，而不是一个承诺并明确执行它，给我留下这样的东西：

但这似乎也不理想。什么是实现干净的承诺链的最干净的方法，同时确保.then动画完成时唯一的执行？

你可以在这里看到我的代码：http: //codepen.io/anon/pen/ONbXdx

我想知道我们如何将velocity.js 库包含到我们的项目中，以便我们可以拥有更流畅的动画。谢谢！

索引.html

脚本.js

有没有办法检查浏览器是否支持 webanimation API，这样我们就不需要加载 webanimations polyfill？

github 上的文档讨论了 Element.animate 和 Playback Control。我可以检查元素上的 $0.animate ，但我不确定如何检查播放控件。这是检查我们是否需要 polyfill 的准确方法吗？

当我根据 Material Design Guidelines 制作一些动画时，我在制作弯曲的运动路径时卡住了。

首先，我使用 Polymer 来构建尽可能多的项目。我想实现这个视频中显示的动画。动画应该在元素网格上运行，单击时这些元素会展开以填满屏幕。以下视频最好地展示了这种效果。

我一直在尝试使用霓虹动画元素做一些事情，但还没有找到一种轻松做到这一点的方法。

我确实了解了 Web Animations API 以及如何使用它来实现运动路径，但找不到一种方法来让它与使用 Polymer 构建的动画一起工作。

另一种可能的解决方案是在使用霓虹灯动画构建的自定义动画中设置许多关键点。通过在曲线上设置足够多的点，就有可能使曲线按需要出现。

我的问题是，在单击网格的随机元素时制作弯曲运动路径动画的最简单和最好的方法是什么？

我有一个动画，当一个部分完成时，另一个部分开始，它可能会排很长的队列。

我把代码放在这里： https ://jsfiddle.net/homa/qub7ejd1/

如您所见，有队列，我有以下代码：

我的代码变得非常丑陋，因为它逐渐变长。此外，当我有 if else 在队列中运行特定动画时，它几乎不可读。

你有什么建议来解决这个问题吗？

我刚刚使用在线服务为自己生成了一个基于 SVG 的加载指示器，但是每次加载使用它的页面时，我都会收到来自 Chrome 的警告，通知我 SMIL 动画正在被弃用，这相当令人讨厌。为了摆脱它，我决定考虑<animate>用 Web Animations 替换标签。以下是原始 SVG：

这就是我最终得到的结果：

background-image我正要为我设法让它工作而感到非常兴奋，然后当我注意到完全相同的 SVG在 CSS 中用作 a 时，我的笑容僵住了（下面的演示；注意我在这里使用数据 URI 内联了 SVG，但是当使用常规 URL 加载 SVG 时也会发生同样的情况）。

我应该忽略警告并继续使用 SMIL，还是有办法让 Web 动画在 SVG 中工作？

我最近才开始搞乱 Ng2，现在我正在用 ionic2 开发一个应用程序。我第一次深入研究动画部分，我遇到了一些问题。

我有一个 ngFor ，它基本上以不同的宽度重复 s 。数组中的每个元素都有自己的 div 宽度值，该值由组件的 onInit 方法计算得出。在动画之前，我通过[style.width]="expresson". 文档说您可以使用 '*' 定义动画结束状态样式，这意味着它将从计算的样式中获得正确的值，但是当我自己以编程方式设置宽度时，这不起作用。

所以，问题是，我如何告诉动画在我改变宽度时触发，或者动态设置结束状态的值？谢谢！

编辑：这是一个带有示例的plunkr 。我将动画后的最终宽度设置为 50%，但我遇到的问题是将最终宽度设置为组件数组中定义的值。只需删除 html 中的 @animation 即可查看我想要得到的最终结果。

我正在构建一个 d3js 液体填充可视化，如http://jsfiddle.net/zm5p9LLe/中所述。该示例显示了一种液体填充量规。我正在循环并创建多个仪表。但是，动画仅适用于循环的最后一次迭代。这是由于转换的公共 div id 造成的吗？我们是否有任何替代品可以使动画在所有仪表中工作？

HTML

CSS

JAVASCRIPT

有人能告诉我关于这个联合国儿童基金会网站的门动画和缩放页面转换的任何信息吗，我想尝试制作这个很酷的动画。至少给我“关键字”如何找到它。那些是用 html5 制作的吗？

Paper-dialog 使用进入/退出动画，但 Chrome 已弃用此功能。

有解决办法吗？？？我需要更新 web-animations-js 吗？

尝试单击后，在具有动画的页面上出现以下错误：

未捕获的类型错误：无法在“元素”上执行“动画”：“函数（a）{return a}”不是缓动（…）的有效值