问题标签 [web-animations]

如何检测 CSS3 动画或 Web 动画 ( Element.animate) 所做的更改？

（对不起我的英语不好！这是我在 Stackoverflow 中的第一个问题）

我知道 MutationObserver，它仅在我更改内联样式或使用时才会响应requestAnimationFrame（因为我使用它更改了内联样式）。但如果我使用 CSS3 动画或 Web 动画，MutationObserver 不会响应，因为它们不会更改内联样式。

看到这个......这里有两个div...... div1，div2。div1 的位置会随着 div2 的位置变化而变化。但这只有在我使用 requestAnimationFrame 时才会发生，如前所述。

我的问题是如何为 css3 动画和网络动画（Element.animate）做到这一点？

我有一个动画，它在 stackblizt ( https://stackblitz.com/edit/burger?file=app%2Fburger%2Fburger.component.ts ) 以及在本地运行良好ng serve --aot，但它似乎直接跳到生产构建的最终状态 ( ng build --prod) http://burger.fxck.cz/

你能停止代码中可能导致它的东西吗？

在组件装饰器中这样使用

我想在 Angular 4 应用程序中为图像交换设置动画。当控制器替换 img src 属性时，旧图像应该消失并出现新图像。

在 AngularJS 中，这可以通过使用 ng-animate-swap 更改不透明度来实现。但是，Angular 4 似乎不支持动画交换。如果没有交换触发器，如何实现这一点？

我尝试为 src 属性添加从 void 到 * 并返回的转换，但这不能按预期工作。第一个图像是动画的，后来交换发生时没有动画。

我的 Angular 5 应用程序出现问题：

我在 ul 标记中放置了一个角度动画的触发器，这意味着将其高度从 0 更改为 *，并且它在所有设备上运行良好，除了运行 iOS 7 的设备。

在测试这些并触发动画时，我得到：

“尝试在对象 '[object HTMLUListElement]' 上使用描述符 '{“enumerable”:true,“configurable”:true}' 配置 'style' 并出错，放弃：TypeError: Attempting to configureable attribute of unconfigurable property。”

登录控制台，在 polyfills.bundle.js:10096 出现错误：

“TypeError：'undefined' 不是函数（评估 'b.style._set(a.propertyName(c),d)'）”。

这会导致我的应用程序崩溃。有没有人有任何线索？

谢谢， 马特奥

我在我的页面上使用@angular/animations 。它在 Chrome、Firefox、Safari(Desktop) 上完美运行，但具有动画的 div 在 Safari (iOS) 中不可见。

我在我的polyfills.ts文件中导入了web-animations-js 。

我在这个网站的部分页面中使用了分页。我按照它的指示，现在下面是我在项目中的相关文件：

app.item.html

应用程序.item.ts

包.json

app.module.ts

我web-animations用这个命令安装：npm install --save web-animations-js

并放入<script src="../node_modules/web-animations-js/web-animations.min.js"></script>我的index.html未注释的

在我的polyfill.ts但不仅分页不起作用而且就像那样，而且我在我的浏览器中看到这个错误：

我有一个 Angular 6 应用程序。

我想加载 Web Animations Js polyfill，但是当它加载时 IE9 显示错误并停止加载应用程序。

有什么解决办法吗？

-我尝试使用 JS 检查浏览器版本，然后使用 require () 调用加载播放器。这种方法在 Angular 5 上运行良好，但在 Angular 6 中 require () 不再可用。

-另一种选择是将 pollyfill 内容包装在一个调用函数中，仅当浏览器不是 IE9 时才调用。

任何其他不涉及使用服务器端浏览器检测的想法？

谢谢！

I found out a difference between css3 keyframes and web animation api try this demo https://code.h5jun.com/pizi/edit?html,css,js,output

same options:

web animation api version:

but the result are totally different and i don't know why

我正在使用角度 5。

遵循以下步骤：

添加 web-animations-js 作为依赖项：

并取消注释 polyfils.ts 中的以下行

polyfill.ts：

我在 IE9 中遇到错误，在 chrome、firefox 和 IE10 和 11 中工作正常：

SCRIPT5007：预期对象

网络动画.min.js (15,23868)

参考：使用更新的 Webpack 版本的 Angular CLI 添加 polyfill 更容易：

另外，我在 index.html 中为 promise lib 添加了 polyfill，因为 IE9 不支持 promise：

我正在尝试使用 Web Animations API ( https://developer.mozilla.org/en-US/docs/Web/API/Element/animate ) 合成一些动画。我想播放一个可以缩放我的项目的介绍动画，然后让它对 hoover 和 click 事件做出反应以播放一些额外的动画。我认为可以使用最近在 Firefox 和 Chrome 中引入的“复合”属性来组合动画（使用此作为参考：https ://css-tricks.com/additive-animation-web-animations-api/ ），但它似乎仍然取代了我之前声明的动画。

我把代码弄乱了：http: //jsfiddle.net/v0mk9eg4/51/

注释掉 clickAnim 时播放 hooverAnim，注释掉 hooverAnim 时播放 introAnim。多个动画应该如何组合在一起播放？