[CSS3] transform: scale(0, 0) からのアニメーションをしようとしてIE11で変な挙動だった

2017/02/12

こんにちは。きんくまです。

Vue.js の transitionは便利です。
それでやっていたところ、IE11で挙動がおかしかったのでメモ。

transform:scale(0, 0); -> scale(1, 1); へのアニメーションを作っていました。
Vue.jsのtransitionには appear という、画面に現れる初回のみ適用されるアニメーションがあります。

予想されるイメージとしては、何もないところから、拡大して画像が現れる予定。

そしたら、Win10版のIE11 だと 一瞬 scale(1,1) の状態で画面にぱっと現れた後、transitionが適用されるような挙動がありました。

で、いろいろと試した結果、scale(0,0);という値がマズかったみたい。

scale(0.01, 0.01); からだとうまくいきました、、。

これひょっとして何かの値を0で割っちゃって出ちゃってるエラーなのかな、、?
数値を0で割ると、無限大になってエラーになりますよね。それだったりして。
ちなみに、他のブラウザChromeやmobile safari, Androidではうまくいっていました。

こうして記事にして書いてしまえば、しょうもない小ネタなんですが、数時間を返してwww

LINEで送る
Pocket

自作iPhoneアプリ 好評発売中!
フォルメモ - シンプルなフォルダつきメモ帳
ジッピー電卓 - 消費税や割引もサクサク計算!

ページトップへ戻る