Eu tenho que usar a matriz de transformação para animar a transformação: escala de um elemento.
Eu quero escalar de 0 a 1. Se eu usar o seguinte código, ele funcionará corretamente:
.container {
width: 200px;
height: 100px;
background: yellow;
transform: scale(0);
transition: transform 1s;
}
.container.open {
transform: scale(1);
}
https://jsfiddle.net/w4kuth78/1/
Se eu usar a matriz em si, é não trabalhando.
.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);
}
https://jsfiddle.net/m7qpetkh/1/
Estou fazendo algo errado ou isso simplesmente não está funcionando? Eu estou querendo saber, porque ele não funciona no Chrome e Firefox ...
A saída debug console_log diz que na escala de 0 para 1, a matriz também é definida da matriz (0,0,0,0,0,0) para a matriz (1,0,0,1,0,0).
EDITAR:
Confusão total ... Se eu mudar os valores de scaleX e scaleY na matriz para 0.1 ou 0.01, ele funciona ... wow
Respostas:
2 para resposta № 1Ao animar ou transicionar transformações, oas listas de funções de transformação devem ser interpoladas. Duas funções de transformação com o mesmo nome e o mesmo número de argumentos são interpoladas numericamente sem uma conversão anterior. O valor calculado será do mesmo tipo de função de transformação com o mesmo número de argumentos.
Regras especiais se aplicam a rotate3d (), matrix (),matrix3d () e perspectiva (). As funções de transformação matrix (), matrix3d () e perspective () são convertidas em matrizes 4x4 primeiro e interpoladas. Se uma das matrizes para interpolação é singular ou não-invertível (se seu determinante é 0), o elemento transformado não é renderizado e a função de animação usada deve retornar a uma animação discreta de acordo com as regras da respectiva especificação de animação.
Então, no caso da matriz (0,0,0,0,0,0), é óbvio que as matrizes de resultado 4X4 para escala são singulares
Créditos para http://www.w3.org/TR/css3-2d-transforms/