Discussions

Qjsで要素を非表示から表示させてtransitionでアニメーション付ける方法

非表示の要素を表示させてからtransitionでアニメーションを付けたい場合、
表示させて

setTimeout(function(){ スタイルの変更 }, 0)

みたいにやるとtransitionが適用されますが、
Firefox(Ver7 on Mac)の場合、適用されないことが多いです(適用される場合もある)。
0.020秒後とかにすると上手くいきますが。。。

このように非表示から表示させてtransitionでアニメーション付けたい場合、
上記の問題を回避する方法や、また別に良い方法あれば教えてください。

Sample Code

AAnswer to: jsで要素を非表示から表示させてtransitionでアニメーション付ける方法

GeckoTang

css transitionsでsetTimeout()を使って適用を遅らせないといけない例
http://jsdo.it/ndruger/pbd9

forked: css transitionsでsetTimeout()を使って適用を遅らせないといけない例
http://jsdo.it/tsmallfield/wEUH

僕はsetTimeout使ってました。

ksk1015

ありがとうございます。

強制的にリフローさせる方法はFirefoxでも上手くいきました。
http://jsdo.it/ksk1015/Ac7U

Post a question

You can post JavaScript, HTML, CSS related questions with attached reference to actual codes and get the answers likewise.

Ask a question

  • 1. Click the ‘Post a question’ above

  • 2. Enter question details, reference code, and click ‘Add question’ button

  • 3. Question will be paired with the code on display

Add an answer

  • 1. Choose a question

  • 2. Enter answer details, attach the reference code and click ‘add answer’ button

  • 3. Your answer will accompanied with attached code

Tag