javascript - 使用带有 getComputedStyle(element).transform 的 Web Animations API 问题模拟附加动画

Question

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

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

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

在这个例子中，蓝色框有想要的动画，红色框动画不正确:

我想知道:- 如果存在解决此问题的方法- 如果附加动画的实现将支持 transform with 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

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

最主要的是目标元素相对于父元素的定位不同。 (一个的左值高于另一个)。由于透视值在包装器中，透视原点也在包装器中，因此很难使它们匹配。

当这个问题得到解决时，我重做了显示透视没有真正问题的片段。

但是仍然存在信息缺失的问题，正如我在前面的问题中所讨论的那样，这是无法解决的。

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


var elem = document.getElementById('target');
elem.style.transform = style;

#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);
}

<div id="wrapper">
  <div id="target">wrong animation</div>
</div>

<div id="wrapper2">
  <div id="target2">correct animation</div>
</div>