使用 Web 动画模拟附加动画 API getComputedStyle(element).transform 问题

Question

我需要使用 Web Animations "simulate" 添加动画 API。

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

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

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

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

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

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

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

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

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>

使用 Web 动画模拟附加动画 API getComputedStyle(element).transform 问题

Simulating additive animations using Web Animations API issue with getComputedStyle(element).transform

javascript

css

animation

web-animations