9

要素の変換: スケールをアニメーション化するには、変換マトリックスを使用する必要があります。

0 から 1 にスケールしたい。次のコードを使用すると、正しく動作します。

.container {
    width: 200px;
    height: 100px;
    background: yellow;
    transform: scale(0);
    transition: transform 1s;
}
.container.open {
    transform: scale(1);
}

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);
}

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に変更すると、機能します...すごい

4

1 に答える 1

3

変換をアニメーション化またはトランジションする場合、変換関数リストを補間する必要があります。同じ名前で同じ数の引数を持つ 2 つの変換関数は、以前の変換なしで数値的に補間されます。計算された値は、同じ数の引数を持つ同じ変換関数タイプになります。

特別な規則が、rotate3d()、matrix()、matrix3d()、および perspective() に適用されます。変換関数 matrix()、matrix3d()、および perspective() は、最初に 4x4 マトリックスに変換され、補間されます。補間の行列の 1 つが特異または可逆でない場合 (行列式が 0 の場合)、変換された要素はレンダリングされず、使用されるアニメーション関数は、それぞれのアニメーション仕様の規則に従って個別のアニメーションにフォールバックする必要があります。

次に、matrix(0,0,0,0,0,0) の場合は明らかです。スケールの 4X4 結果行列は特異です。

http://www.w3.org/TR/css3-2d-transforms/のクレジット

于 2015-06-07T06:47:28.130 に答える