Uçağa animasyon ekle (CSS)
önem: 5
Aşağıdaki gibi bir animasyon yap (Uçağa tıkla):
- Resim tıklanınca boyutu
40x24px
'den400x240px
'e çıkıyor. - Animasyon 3 saniye sürüyor.
- Bitince “Bitti!” diye mesaj göster.
- Animasyon süresince uçağa birden çok kere tıklanabilir. Bu tıklamalar bir şeyi bozmamalıdır.
width
ve height
özelliklerinin animasyonu için CSS:
/* orijinal class */
#flyjet {
transition: all 3s;
}
/* JS .growing ekliyor*/
#flyjet.growing {
width: 400px;
height: 240px;
}
Dikkat et! transitionend
iki kere tetikleniyor – her özellik için bir kere. Eğer bir konrol yapmazsak mesaj 2 kere gözükecek.