See More

Chceme tento open-source projekt zpřístupnit lidem po celém světě.

Pomozte přeložit obsah tohoto tutoriálu do svého jazyka!

Mapa tutoriálu
zpět k lekci

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 40x24px na 400x240px (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“.

Otevřít pískoviště pro úlohu.

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.

Otevřít řešení na pískovišti.