问题标签 [web-animations]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
web-animations - 使用 Web Animations API 扩展 div 高度 0 --> 'auto'
我正在尝试了解网络动画标准及其polyfill，因为我看到它在 Angular 动画库中运行良好（您将动画结束值设置为 '*' ，这将成为 div 大小的 100%，但是使用特殊的 Angular Animations DSL）。
我以为我会从一些简单的事情开始，所以我想做的就是将 div 从 0 高度扩展到“自动”。我知道有数千种其他方法可以做到这一点，但我试图在这段代码中使用 web-animations-js
下面的代码（类似于MDN 示例）导致 div 直接扩展为“自动”，但延迟 1 秒后，而我希望它顺利扩展。
相比之下这个
导致 div 立即展开，但又没有平滑过渡。
这确实提供了平滑的过渡，但需要仔细选择值来替换“300px”，而这正是我想要避免的。
javascript - 如何在 Angular 2 中执行无限动画？
基本上，我想利用 angular 中的 web-animations-api polyfill（目前为 4 个）对元素执行无限动画。
让我们看一个基本的非角度示例：
我如何将其翻译成 Angular？
这是我迄今为止尝试过的，但只能工作一次：
有没有办法使用 @angular/animation 插件来做到这一点，而不是存储一个 ElementRef 并按照上面的示例进行操作？或者我误解了这个插件的用途？
提前致谢。
html - 如何为文本设置动画，而不是使用 CSS
我已经使用 Bootstrap 进行了菜单导航，并且在菜单内添加了到超链接的简单过渡...在这里查看。
正如您所看到的，当您将鼠标悬停在菜单的右侧链接上时，它们会向左移动，因为我已将 CSS 设置为：
但问题是我只想为文本而不是图标设置动画！查看我的 HTML 代码以更好地理解：
如您所见，每个链接都包含一个跨度标签，它是一个图标。并且由于我的自定义 CSS，它影响了padding-right:20px;但我不希望 span 标签受到此转换的影响。只有菜单链接或文本应该是动画的......
所以如果你知道这个问题的答案，请告诉我！谢谢 ：）
angular - Angular 4 动画状态变化
我有一个应用于两个 div 的动画，以使它们进入和退出 void 状态。
见：https ://plnkr.co/edit/uCdBafYG7NZxVVppiTpo?p=preview
html:
打字稿：
这些动画有效，但是当状态更改时，它不会应用于第一个动画。我可以通过将动画延迟 1 毫秒来解决这个问题，但这很难看，而且感觉有点 hacky。
有没有更简洁的方法来实现这一点
polymer - 如何让纸质菜单按钮工作？
在本地提供以下演示时，我不断收到错误消息，抱怨无法运行动画。虽然它确实适用于我的 jsBin。
http://jsbin.com/kadugokade/edit?html,控制台,输出javascript - Web Animations API：按需重置动画
我有一个复杂的动画，它是 KeyframeEffect 组合成 GroupEffect 和 SequenceEffect 的组合。在一个非常简化的版本中，它看起来像这个 JSBin https://jsbin.com/denucaq/edit?html,js,output
问题是我必须在某个时候重置动画所做的所有更改，以便可能重新运行动画或做其他事情。
我不能使用fill: 'none'，因为不同的元素以不同的持续时间进行动画处理，并且它们都必须保持在最终位置，直到所有元素都被动画化。
所以问题是我应该在crazyWords.reset函数体中写什么？
angular - Angular 4 组件响应式动画
我正在开发一个 Angular 响应式应用程序，在移动设备上它有一个抽屉。
我喜欢 Angular 中的 Web Animations API 实现，但是我找不到可以根据我的媒体查询断点配置动画的地方。
我所能找到的只是通过我的 css 表取消动画，但这让我开始在我的项目中的不同位置传播代码，我不确定这是否是我想要做的 Angular ......
现实生活中的例子
我的应用程序抽屉使用此代码制作动画
drawerOpened是按下应用程序菜单按钮时切换的布尔值。
我的组件看起来像这样：
我取消动画效果的CSS 代码
除了在我的 css 代码中操作所有内容并禁用 Desktop BreakPoint 上的 css 属性之外，是否存在某种在 Angular 上下文中执行此操作的方法？
谢谢！
animation - 覆盖网页动画api设置的样式
我正在使用网络动画 api 将 div 动画到特定高度。我正在使用填充模式“前进”来保留高度后动画。但是，稍后我想通过 CSS 手动将高度设置回“自动”，但是通过将填充模式设置为转发，它似乎可以防止 CSS 在动画完成后影响高度属性的能力，即使我将其设置为元素。
我无法在动画播放后立即将高度设置回自动，所以我想知道是否有办法覆盖由填充“转发”设置的属性？
animation - 使用 web 动画 api 独立地为变换属性设置动画
是否可以在一个动画中独立地为变换属性的不同部分设置动画？
例如：
我想在相同的动画中为相同的元素但在不同的时间设置缩放和平移动画。
这个特定的例子不起作用，似乎只影响 translateX 而不是规模。
我如何修改它以同时转换两者？