kembali ke pelajaran

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.

Buka sandbox untuk tugas tersebut.

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.