AndroidではCSS3のtransitionの挙動が違う!? |
ドラッグして動かすとアイコンの縮小、拡大を繰り返してしまう現象を確認しました。
ドラッグを始めるとscaleを1.25倍にして、ドラッグ位置にtranslateを設定します。
移動するとscaleはそのままにtranslateを修正することで
移動位置だけがtransitionの対象となり移動をtransition-durationで設定した時間で
移動を完了します。
Androidではtransitionの再実行が行われる場合
対象(transition-property)となるtransformで設定されたもの、すべてを
アニメーション対象としてしまうようです。
そのため、移動処理を行うドラッグでtranslateで位置情報だけを更新し
scaleは変更していない場合でも初期値(1.0倍)から設定値(1.25倍)に
アニメーションしてしまいます。
ググってみたらなんか不具合っぽいですね・・・
ちなみにAndroidでFirefox for Mobileを試したところ
ドラッグすらできませんでした・・・
イベントの設定が間違ってるっぽいです・・・
にほんブログ村