Animace letadla (CSS)
důležitost: 5
Zobrazte animaci stejně jako na následujícím obrázku (klikněte na letadlo):
- Po kliknutí se obrázek zvětší z
40x24pxna400x240px(10-násobně). - Animace trvá 3 sekundy.
- Na konci zobrazte: „Hotovo!“
- Během procesu animace může dojít k dalším kliknutím na letadlo. Při nich by se nemělo nic „rozbít“.
CSS pro animaci width a height současně:
/* původní třída */
#letadlo {
transition: all 3s;
}
/* JS přidává .zvětšování */
#letadlo.zvětšování {
width: 400px;
height: 240px;
}Prosíme všimněte si, že událost transitionend se spustí dvakrát – pro každou vlastnost jednou. Kdybychom tedy neprovedli další kontrolu, zpráva by se zobrazila dvakrát.