javascript动画方法积累问题

13z8s7eq 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(200)

我试图做一个动画的例子，但有一个关于积累的问题。第一次单击按钮时，平移动画完成，元素的位置永久更改。但是，在第二次单击时，它会再次执行平移动画，但这次不会保留最后一个位置。如何克服这个问题？我浏览了mdn文档并应用了可选部分，但未能完成此挑战。当做
https://jsfiddle.net/ja218pbr/19/

document.getElementsByTagName("button")[0].addEventListener("click", function() {
    document.querySelectorAll("div")[0].animate([
  {transform: 'translate(100%, 0)'}
    ], {
    duration: 250,
    composite: "accumulate",
    iterationComposite: "accumulate",
    fill: "forwards"
    });
});

JavaScript Html css Animation

来源：https://stackoverflow.com/questions/68340819/javascript-animate-method-accumulation-problem

1条答案

按热度按时间

zrfyljdw1#

如果我理解正确，您希望能够让对象从之前结束的位置再次滑动。要做到这一点，我们可以在每次单击按钮时获得boundingclientrect并计算新的平移距离，方法是基本上取对象的宽度并添加客户端rect的左侧距离，这将有效地允许矩形从之前结束的距离继续移动。我还删除了 composite 属性，因为它导致矩形跳过正确的位置。

document.getElementsByTagName("button")[0].addEventListener("click", function() {
  const clientRect = document.querySelectorAll("div")[0].getBoundingClientRect();
  const translationX = clientRect.width + clientRect.left;
  document.querySelectorAll("div")[0].animate([{
    transform: `translate(${translationX}px, 0)`
  }], {
    duration: 250,
    iterationComposite: "accumulate",
    fill: "forwards"
  });

});

body {
  margin: 0;
}

div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: yellow;
  text-align: center;
  line-height: 150px;
}

<div>Moving Object</div>
<button>Press</button>

赞(0）回复(0）举报 2021-09-13

我来回答

javascript动画方法积累问题

1条答案

相关问题

热门标签

最新问答