0

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

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

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

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

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

4

1 回答 1

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>

于 2017-01-13T17:03:54.740 回答