Çözüldü JavaScript ile CSS animasyonu çalıştırma

William Crusader · 26 Kasım 2022

Bir element için CSS üzerinde animasyon hazırladım. Bunu JavaScript üzerinde çalıştırmam lazım (bir fonksiyon kuracağım.). Bunu nasıl yaparım?

Ecmel · 26 Kasım 2022

JS tarafında butona tıklanınca class verdirmek mantıklı geldi bana.

Öncelikle o butona bir tane id verelim. Bu id "test" olsun. O butona onclick'te fonksiyonun adını veriniz. Ben mesela animasyon olarak verdim.

JavaScript:

function animasyon() {document.getElementById('test').className = 'animasyonlu-btn';}

Fonksiyonumuz bu şekilde olacak. Burada "animasyonlu-btn" adlı bir class veriyoruz butona tıklanınca.

CSS:

.animasyonlu-btn {
  animation:onethatgetbigger 5s;
  animation-fill-mode: forwards;
}

Buradaki "onethatgetbigger" verdiğin animasyonun adı, yanındaki de kaç saniye süreceği değeri.

Bu şekilde sorunun çözülecektir.

William Crusader · 26 Kasım 2022

Ecmel dedi:
@William Crusader id ve classı düzgün vermemişsiniz çünkü.

<img id="test" class="board1" onclick="animasyon()"> şeklinde olmalı.

ID ve CLASS'ı ayrı ayrı yapınca oldu. Fakat neden id, class şeklinde yapamıyorum? Önceki projelerimde çalışmıştı.

Ecmel · 26 Kasım 2022

@William Crusader Bugüne kadar hiç böyle bir kullanım görmedim, varsa da ben bilmiyorum. Her zaman ayrı ayrı verdim ki öyle olması gerektiğini biliyorum. Senin şeklinde kullanan bir tane proje görmedim ki HTML yapısına çok uyan bir kullanım değil. Eğer varsa da böyle bir kullanım kaynağını atarsan incelerim.

Çözüldü JavaScript ile CSS animasyonu çalıştırma

Ayrıntılı düzenleme

William Crusader

Hectopat

Ecmel

William Crusader

Hectopat

Ecmel

Megapat

Benzer konular