我需要在div上为属性执行动画scaleZ()并translateZ()使用CSS动画.
当transform属性的动画中的初始和最后一个关键帧值具有类似的"格式" 时,以下代码可以正常工作:
0%是 transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
100%是 transform: rotateY(179deg) scaleZ(2) translateZ(200px);
console.clear();
document.addEventListener('DOMContentLoaded', () => {
let content1 = document.querySelector('#content1');
var computedTransform = window.getComputedStyle(content1).transform;
console.log(computedTransform);
}); @-webkit-keyframes animation {
0% {
/*works*/
-webkit-transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
/*issue*/
/*transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);*/
}
100% {
-webkit-transform: rotateY(179deg) scaleZ(2) translateZ(200px);
transform: rotateY(179deg) scaleZ(2) translateZ(200px);
}
}
@keyframes animation {
0% {
/*works*/
-webkit-transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
/*issue*/
/*transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);*/
}
100% {
-webkit-transform: rotateY(179deg) scaleZ(2) translateZ(200px);
transform: rotateY(179deg) scaleZ(2) translateZ(200px);
}
}
#content1 {
-webkit-animation: animation 2s;
animation: animation 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
/*works*/
-webkit-transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
/*issue*/
/*transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);*/
}
transform对于matrix3D从中返回的关键帧0%写入的相同动画Window.getComputedStyle()不会使动画正常工作:
0%是 transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
100%是 transform: rotateY(179deg) scaleZ(2) translateZ(200px);
console.clear();
document.addEventListener('DOMContentLoaded', () => {
let content1 = document.querySelector('#content1');
var computedTransform = window.getComputedStyle(content1).transform;
console.log(computedTransform);
}); @-webkit-keyframes animation {
0% {
/*works*/
/*transform: rotateY(-179deg) scaleZ(2) translateZ(200px);*/
/*issue*/
-webkit-transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
}
100% {
-webkit-transform: rotateY(179deg) scaleZ(2) translateZ(200px);
transform: rotateY(179deg) scaleZ(2) translateZ(200px);
}
}
@keyframes animation {
0% {
/*works*/
/*transform: rotateY(-179deg) scaleZ(2) translateZ(200px);*/
/*issue*/
-webkit-transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
}
100% {
-webkit-transform: rotateY(179deg) scaleZ(2) translateZ(200px);
transform: rotateY(179deg) scaleZ(2) translateZ(200px);
}
}
#content1 {
-webkit-animation: animation 2s;
animation: animation 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
/*works*/
/*transform: rotateY(-179deg) scaleZ(2) translateZ(200px);*/
/*issue*/
-webkit-transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
}
由于技术原因,我需要使用0%的关键帧作为transformation从DOM中的计算样式正确返回的值,使用Window.getComputedStyle()或其他函数(如果可用).
我的问题:
我的代码是第二个例子吗？
你能建议另一种从DOM获取计算值的方法吗？
你知道从返回的值相关的任何错误Window.getComputedStyle()吗？
你知道CSS动画和不同"符号"的任何错误transform吗？
注意:我在最新的Chrome(55.0.2883.87 m)和FireFox(50.1.0)上看到了这个问题.
欢迎任何解决方案或想法.
编辑:
我已经创建了一些新的示例(适用于Chrome)以供进一步调查.
基本上两个例子是旋转的
from rotateY(20deg)
to rotateY(90deg)
使用一种"符号"的变换,按预期工作
期望的效果 https://jsbin.com/bodaxefake/edit?html,output
当值由计算的CSS样式取代并使用matrix3d重新应用于动画时,动画会有轻微的失真.
相反,我希望重现完全相同结果的动画,因为我理解matrix3d Window.getComputedStyle()应该返回相同的值.
效果不正确 https://jsbin.com/luhikahexi/edit?html,output
你的问题是第4点.但这不是一个真正的错误,它是一个复杂的算法,试图弄清楚你想做什么.
当你制作动画从旋转(0度)移动到旋转(360度)时,你有没有想过2个矩阵是一样的？如果仅指定了最初的最终状态,则动画将不存在.
当你以你的方式设置动画时,算法对于做什么一无所知,因此行为不是你所期望的.但我不会说这是一个错误.
我设置了一个动画,可以做你想要的.诀窍是让矩阵保持不变,添加一个我们将要改变的初始旋转,然后添加另一个与此相反的旋转以保持原始状态.
由于这个片段有点夸张,我删除了webkit前缀.(另一方面,现在也不是真的需要)
console.clear();
document.addEventListener('DOMContentLoaded', () => {
let content1 = document.querySelector('#content1');
var computedTransform = window.getComputedStyle(content1).transform;
console.log(computedTransform);
});@keyframes animation {
0% {
transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
}
0.1% {
transform: rotateY(-179deg) rotateY(179deg) matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
}
100% {
transform: rotateY(179deg) rotateY(179deg) matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
}
}
#content1 {
animation: animation 2s;
animation-fill-mode: forwards;
transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
}
京公网安备 11010802040832号 | 京ICP备19059560号-6 