javascript - 尝试使用原生 Element.animate 方法，但无法添加关键帧百分比

Question

有人问了一个相关的问题，我正在尝试让它与实验技术 Element.animate 一起工作。 MDN 文档相当……简陋，技术状态可以说是幼稚的。

https://developer.mozilla.org/en-US/docs/Web/API/Element/animate

我有这个标记:

<div class="container">
<div id="movetxt">left to right, right to left</div>
</div>

只希望 movetxt div 在容器 div 中从左向右移动无限远。

css 是硬编码的，因为我不知道如何获取 div 文本节点的宽度。

.container {
margin: 0 auto;
width: 300px;
border: 1px solid red;
}

#movetxt {
width: 180px;
}

现在，JS

var container = document.querySelector(".container");
var movingText = document.getElementById("movetxt");
 var containerWidth = container.offsetWidth;
var textWidth = movingText.offsetWidth;
var totalDistance = containerWidth - textWidth;
var oneWayDistance = totalDistance / 2; //just establishing the travel distance

现在是实验部分:

 movingText.animate([
// keyframes
{ transform: 'translateX(' + oneWayDistance + 'px)' }, 
{ transform: 'translateX(-' + totalDistance + 'px)' }
], { 
// timing options
duration: 1000,
iterations: Infinity
});

这种方法可行，控制台会抛出一些错误，但它会运行。

但是，我想要这种关键帧格式，举个例子:

  0%   { transform: 'translateX(' + oneWayDistance + 'px)' },
        10%  { transform: 'translateX(-' + totalDistance + 'px)' }

如果我尝试这样做，我会得到 Failed to execute 'animate' on 'Element': Keyframes must be objects, or null or undefined.

fiddle 链接:

http://jsfiddle.net/vdb3ofmL/1135/

一定有某种方法可以将关键帧 % 值放在那里，有人能弄清楚吗？

干杯

Answer 1

您需要考虑文本最初位于容器左边缘的事实，因此您需要将 0 格式转换为 容器宽度 - 文本宽度:

而您要查找的是偏移量 值 ^ref

var container = document.querySelector(".container");
var movingText = document.getElementById("movetxt");
var containerWidth = container.offsetWidth;
var textWidth = movingText.offsetWidth;
var totalDistance = containerWidth - textWidth;
var oneWayDistance = totalDistance / 2;
console.log(containerWidth);
console.log(textWidth);
movingText.animate([
  // keyframes
  { transform: 'translateX(0)',offset:0 },  /*0%*/
  {  transform: 'translateX(' + totalDistance + 'px)',offset:0.3 }, /*30%*/
  {  transform: 'translateX(0)',offset:1 } /*100%*/
], { 
  // timing options
  duration: 1000,
  iterations: Infinity
});

.container {
  margin: 0 auto;
  width: 300px;
  border: 1px solid red;
}

#movetxt {
  width: 180px;
  border:1px solid;
}

<div class="container">
<div id="movetxt">left to right, right to left</div>
</div>