Webアニメーションを使用した追加アニメーションのシミュレーションgetComputedStyle（要素）.transformのAPI問題

Question

WebアニメーションAPIを使用して追加アニメーションをシミュレートする必要があります。

documentationに記載されているように、追加アニメーションはまだサポートされておらず、getComputedStyle(element)の使用が推奨されています。

getComputedStyle(element).transformによって返されたmatrix3dには、おそらくパースペクティブな情報が含まれていない可能性があるため、開始キーフレームとして使用している場合、アニメーションは同じではありません（赤いボックスの問題）。この例では

、青いボックスは、所望のアニメーションを持って、赤いボックスアニメーションが正しくない：

Iは知りたい： - この問題に対する解決策は が存在する場合 - 添加アニメーションの実装場合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

あなたはスニペットで、いくつかの異なる問題を抱えています。

主なものは、ターゲット要素が親とは異なる位置に置かれていることです。 （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>