我必须使用变换矩阵来动画变换:元素的比例.
我想从0扩展到1.如果我使用以下代码它可以正常工作:
.container {
width: 200px;
height: 100px;
background: yellow;
transform: scale(0);
transition: transform 1s;
}
.container.open {
transform: scale(1);
}
Run Code Online (Sandbox Code Playgroud)
https://jsfiddle.net/w4kuth78/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);
}
Run Code Online (Sandbox Code Playgroud)
https://jsfiddle.net/m7qpetkh/1/
我做错了什么或者这不起作用?我想知道,因为它在Chrome和Firefox中不起作用......
console_log调试输出表示在从0到1的缩放时,矩阵也从矩阵(0,0,0,0,0,0)到矩阵(1,0,0,1,0,0)设置.
编辑:
完全混淆......如果我将矩阵中的scaleX和scaleY值更改为0.1或0.01,它就可以工作......哇
css scaletransform css-transitions css-transforms matrix-transform
今天我对excelphp有点问题.我想手动设置列的默认宽度,只需一次.
我在stackoverflow上找到了一些解决方案,它建议改变每个列的值(例如在循环内).
但我想用一个命令来做.
我想通过在js中为div添加一个类来为clickX设置转换动画.转换和转换属性将添加到css文件中.
var widget = document.getElementById('widget');
widget.style.display = 'block';
document.getElementById('widget2').clientWidth; //comment this line out and it wont work
widget.className = 'visible';
Run Code Online (Sandbox Code Playgroud)
它只有在我添加类之前查询dom 中任何元素的width属性时才有效.
这是一个jsfiddle:https://jsfiddle.net/5z9fLsr5/2/
任何人都可以解释为什么这不起作用?