Css 矩阵尺度转换不起作用
我必须使用变换矩阵来设置变换动画:元素的比例 我想从0缩放到1。 如果我使用以下代码,它将正常工作:Css 矩阵尺度转换不起作用,css,css-transitions,css-transforms,scaletransform,matrix-transform,Css,Css Transitions,Css Transforms,Scaletransform,Matrix Transform,我必须使用变换矩阵来设置变换动画:元素的比例 我想从0缩放到1。 如果我使用以下代码,它将正常工作: .container { width: 200px; height: 100px; background: yellow; transform: scale(0); transition: transform 1s; } .container.open { transform: scale(1); } 如果我使用矩阵本身,它就不工作了 .con
.container {
width: 200px;
height: 100px;
background: yellow;
transform: scale(0);
transition: transform 1s;
}
.container.open {
transform: scale(1);
}
如果我使用矩阵本身,它就不工作了
.container {
width: 200px;
height: 100px;
background: yellow;
transform: matrix(0, 0, 0, 0, 0, 0);
transition: transform 1s;
}
.container.open {
transform: matrix(1, 0, 0, 1, 0, 0);
}
我是做错了什么,还是这根本不起作用?我想知道,因为它在Chrome和Firefox中不起作用
console_log debug输出表示,从0到1缩放时,矩阵也会从矩阵(0,0,0,0,0,0)设置为矩阵(1,0,0,1,0,0)
编辑:
完全混乱。。。如果我将矩阵中的scaleX和scaleY值更改为0.1或0.01,它将正常工作。。。哇设置变换动画或变换时,必须插入变换函数列表。两个具有相同名称和相同参数数的变换函数在不进行前一次转换的情况下进行数值插值。计算值将是具有相同参数数的相同转换函数类型 特殊规则适用于rotate3d()、matrix()、matrix3d()和perspective()。转换函数matrix()、matrix3d()和perspective()首先转换为4x4矩阵并进行插值。如果插值矩阵之一是奇异的或不可逆的(如果其行列式为0),则变换后的元素不会被渲染,并且所使用的动画函数必须根据相应动画规范的规则返回到离散动画 然后在矩阵(0,0,0,0,0,0)的情况下,很明显,尺度的4X4结果矩阵是奇点
非常奇怪!看起来其他矩阵变换值也很难设置动画。不管出于什么原因,IE11都能毫无问题地处理你的演示和我刚刚制作的东西。你回答了你自己的问题,真的。0.001尽可能小,但仍有过渡。我不确定零禁用动画的确切原因,但它确实禁用了。看起来没有错误报告,可能值得提交一份。如果它不是一个真正的bug(我不确定它怎么会不是),你至少可以找一个工程师来澄清它的行为:我创造了一个问题,我得到了答案,YandY Viera提到。所以这不是一个bug,也不会被修复。