Animasi sebuah bidang (CSS)

Tampilkan animasi seperti gambar dibawah (klik pada bidang):

Gambarnya membesar saat di klik dari 40x24px menjadi 400x240px (10 kali lebih besar).
Animasinya memakan waktu 3 detik.
Saat selesai keluarkan: “Done!”.
During the animation process, there may be more clicks on the plane. They shouldn’t “break” anything.
Pada saat proses animasi, mungkin akan terjadi lebih dari 1 klik pada bidangnya. Klik-klik tersebut tidak boleh membuat aplikasinya error.

CSS untuk menganimasikan width dan height:

          /* class original */

#flyjet {
  transition: all 3s;
}

/* JS menambahkan .growing */
#flyjet.growing {
  width: 400px;
  height: 240px;
}
        

Perlu diingat bahwa transitionend memicu dua kali – sekali untuk setiap properti. Jadi jika kita tidak ingin melakukan pengecekan tambahan maka pesannya akan muncul 2 kali.

Buka solusi di kotak pasir.