飛行機をアニメーションする (CSS)
重要性: 5
下の図のようなアニメーションを表示してください(飛行機をクリックしてください)。:
- 写真はクリックで
40x24px
から400x240px
まで大きくなります(10倍) - アニメーションは 3秒です
- 最後に “Done!” を出力します
- アニメーション処理中にも飛行機がクリックがされる可能性がありますが、それらは何も “壊すべきではありません”。
width
と height
両方をアニメーションする CSS です:
/* 元の class */
#flyjet
{
transition
:
all 3
s
;
}
/* JS で .growing を追加*/
#flyjet
.growing
{
width
:
400
px
;
height
:
240
px
;
}
transitionend
は 2回トリガすることに注意してください – すべてのプロパティに対して1度トリガします。したがって、追加のチェックをしない場合、メッセージは2度表示されます。