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)' }

如果我尝试这样做，将无法在“元素”上执行“动画”：关键帧必须是对象，或者为null或未定义。

链接到小提琴：

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

必须有某种方法可以将关键帧的％值放置在那里，任何人都可以解决吗？

欢呼

Answer 1

您需要考虑以下事实：文本最初位于容器的左边缘，因此您需要将格式0转换为width of container - width of text：

您正在寻找的是offset值^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>

Answer 2

您应该使用偏移量

element.animate({
    opacity: [ 0, 0.9, 1 ],
    offset: [ 0, 0.8 ], // Shorthand for [ 0, 0.8, 1 ]
    easing: [ 'ease-in', 'ease-out' ],
}, 2000);

根据您的情况，您可以像这样使用并更改自己的

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;
movingText.animate(
  {transform:['translateX(' + oneWayDistance + 'px)','translateX(-' + totalDistance + 'px)','translateX(' + oneWayDistance + 'px)'],
  offset: [0,0.1]
}, { 
  duration: 1000,
  iterations: Infinity
});

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

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

尝试使用本机Element.animate方法，但无法添加关键帧百分比

2 个答案: