Question

我需要使用Web Animations API“模拟”添加动画。

如documentation添加动画中所述，尚未支持动画，建议使用getComputedStyle(element)。

我面临的问题是getComputedStyle(element).transform返回的matrix3d可能没有包含足够的透视信息，所以如果我用作开始关键帧，动画就不一样了（红框问题）。 / p>

在此示例中，蓝色框具有所需的动画，红框动画不正确：

我想知道： - 如果存在此问题的解决方案 - 如果添加动画的实施支持transform与perspective。

感谢您的时间。

var elem = document.getElementById('target');
var style = window.getComputedStyle(elem);

elem.animate([{
  transform: style.transform // using matrix3d returned from getComputedStyle()
}, {
  transform: 'rotateY(179deg) scaleZ(2) translateZ(200px)'
}], {
  duration: 3000
});

var elem2 = document.getElementById('target2');
elem2.animate([{
  transform: 'rotateY(-179deg) scaleZ(2) translateZ(200px)'
}, {
  transform: 'rotateY(179deg) scaleZ(2) translateZ(200px)'
}], {
  duration: 3000
});

#wrapper,
#wrapper2 {
  perspective: 1000px;
}

#target,
#target2 {
  position: absolute;
  top: 100px;
  width: 200px;
  height: 300px;
}

#target {
  left: 100px;
  background-color: red;
  transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
}

#target2 {
  left: 400px;
  background-color: blue;
  transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
}

<div id="wrapper">
  <div id="target">wrong animation</div>
</div>

<div id="wrapper2">
  <div id="target2">correct animation</div>
</div>

Answer 1

您在代码段中遇到了一些不同的问题。

主要的一点是目标元素与父母的位置不同。（一个左值高于另一个）。由于透视值在包装器中，因此透视原点也是如此，因此很难使它们匹配。

我已经重做了一个片段，表明当这个问题得到解决时，透视没有真正的问题。

但正如前面提到的问题所讨论的那样，缺少的信息仍然存在问题，正如我所说的那样无法解决。

＆＃13;

var elem2 = document.getElementById('target2');
var style = window.getComputedStyle(elem2);


var elem = document.getElementById('target');
elem.style.transform = style;

＆＃13;

#wrapper,
#wrapper2 {
  width: 200px;
  height: 300px;
  border: solid 1px blue;
  top: 100px;
  position: absolute;
}
#wrapper {
  left: 400px;
}
#wrapper2 {
  perspective: 1000px;
  left: 600px;
}
#target,
#target2 {
  width: 200px;
  height: 300px;
  position: absolute;
}
#target {
  background-color: red;
  transform: perspective(1000px) rotateY(-45deg) scaleZ(2) translateZ(200px);
}
#target2 {
  background-color: blue;
  transform: rotateY(-45deg) scaleZ(2) translateZ(200px);
}

＆＃13;

<div id="wrapper">
  <div id="target">wrong animation</div>
</div>

<div id="wrapper2">
  <div id="target2">correct animation</div>
</div>

＆＃13;

使用Web动画API问题使用getComputedStyle（element）.transform模拟添加动画

1 个答案: