2

我正在寻找使用新规范和 polyfill 创建网络动画。我试图创建的动画是让一个元素向右移动 1024 像素并淡出。然后就是这样，它不会重置，动画只是结束。

我正在尝试使用新的 Web Animations Spec 来实现这一点。这是 github 上的 polyfill：https ://github.com/web-animations/web-animations-js

这是我用于动画的代码，但它只是将项目淡出然后重置为完全不透明度。它不动。而且我不希望它在完成后重置。

var player = document.timeline.play(new Animation(document.querySelector('.right'), [ {opacity: "1.0", left:0}, {opacity: "0.0", left:"1024px"}], {direction: "forwards", duration: 1000}));

这是一个带有该代码和 polyfill 的 JS Fiddle：http: //jsfiddle.net/Wz8A8/

更新：似乎一次只需要一个属性来制作动画。关于如何做多个属性的任何想法？也可以只做'到'结束值而不是从关键帧开始，只是在关键帧结束？

4

1 回答 1

2

如果您希望动画继续结束，那么您想给它一个fill（'forwards'而不是'forward'像文档在几个地方所说的那样（现在已经修复）。

让它为left属性设置动画有点棘手。如果transform: 'translate(...)'对您有用，那么动画会非常流畅（潜在的缺点是它对页面其余部分的渲染影响非常有限）。

工作示例：http: //jsfiddle.net/Wz8A8/6/

var player = document.timeline.play(
  new Animation(document.querySelector('.right'), [ 
      {opacity: "1.0", transform:'translateX(0)'}, 
      {opacity: "0.0",  transform:'translateX(100)'}
    ], 
    {direction: "forwards", duration: 1000, fill: 'forwards'}));
于 2014-06-23T22:51:26.920 回答