使用Web动画创建右幻灯片并淡出单实例动画

wordSmith 发表于 Dev

史密斯

我希望使用新的规范和polyfill创建网络动画。我尝试创建的动画是有一个元素向右右移动1024像素并淡出。然后就是这样，它不会重置，动画就结束了。

我正在尝试通过新的Web动画规范来实现这一目标。这是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小提琴：http : //jsfiddle.net/Wz8A8/

更新：似乎一次只需要对一个属性进行动画处理。关于如何可以完成一项以上财产的任何想法？还可以只对最终值执行'到'而不是从关键帧开始，而只是在关键帧结束吗？

彼得·伯恩斯

如果你想在动画继续过去的结束，那么你想给它一个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'}));

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。