Fork
2
Fav
4
View
3174
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 16 lines
  • HTML 3 lines
  • CSS 10 lines
css transitionsの適用を、要素の作成と同時に行うとアニメーションしない例。

要素の生成と同時にcss transistionを適用すると、ブラウザが、どの値をcss transitionsを適用したいプロパティの現在の値とすべきなのか判断できないためと思われる。

さすがにこの場合に勝手にinitial valueからの変化と見なして、transparent -> #ffff00へのアニメーションとするのはまずいし妥当な動作。

[2011/08/28 追記]
forkedされたtsmallfieldさんの下記のページより、ドキュメントツリーに先に追加して、リフローさせた後で適用するとアニメーションとして適用されるとのこと。

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

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

ndruger

Author

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by