CSS animasyonunun tamamlandığı nasıl tespit edilir?
Normalde DOM öğeleri CSS animasyonları tamamlandığında kendi üzerlerinde ateşlenen bir olay gerçekleştirirler. Bizler de JavaScript tarafında bu olayları dinleyerek çeşitli aksiyonlar gerçekleştirebiliriz.
Örnek
<html>
<style>
@keyframes hideElement {
from {opacity: 1}
to {opacity: 0}
}
span {
animation-name: hideElement;
animation-duration: 2s;
}
</style>
<span>Merhaba!</span>
<script>
document.querySelector('span').addEventListener('animationend', function(){
this.remove();
});
</script>
</html>Yukarıdaki örnekte, span elemanın içinde yer alan “Merhaba!” yazısı iki saniye içinde opaklığını yitirerek görünmez olacak.
Fakat tamamen yok olmayacak sadece görünmez olacaktır. Bu durumda sayfada yer kaplamaya devam edecektir.
İşte bu durumda JavaScript devreye giriyor. Animasyon tamamlanır tamamlanmaz elemanı DOM ağacından tamamen yok etmek için o elemana
bir animationend olay dinleyicisi ekleyerek, o olay gerçekleştiğinde,
document.querySelector('span').addEventListener('animationend', function(){
this.remove();
});yukarıdaki komutlar sayesinde animasyonun tamamlandığını tespit edip addEventListener('animationend', elamanı DOM ağacından kaldırabiliriz this.remove();.
Peki öğenin CSS animasyonu yoksa?
Herhangi bir sebeple (CSS düzgün yüklenmezse, Yanlış animasyon tanımlanırsa vb.) eleman hiç bir zaman animationend olayını ateşleyemez.
Durum böyle olunca JavaScript olay dinleyicisi içindeki komutları hiç bir zaman çalıştırmaz.
Bu durumda 2sn sonra tamamen yok olmasını istediğimiz bir elaman Element hiç bir zaman yok olamayacaktır. Başlangıçta bu çok masum ve basit bir
sorun gibi görünebilir. Fakat bunu sadece estetik olarak düşünmemek gerek. Herhangi bir form öğesini veya kullanıcı bilgilerini içeren bir elemanı
gizlemek o anki senaryonuz olabilir. Bu durumda şifremi gizle butonuna tıklamasına rağmen, şifresi gizlenmeyen bir müşteri veya kullanıcı oldukça
tedirgin olacak ve sayfaya olan güvenini yitirecektir.
Ne yapmalı?
İşte bu durumda benim de vakti zamanında StackOverflow ‘da sorduğum sorunun (How to fire “animationend” event, when I can’t set a CSS animation?) yanıtlarıyla birlikte bir çözüm elde edebiliyoruz.
- Öncelikle odaklandığımız öğenin bir CSS animasyonu içerip içermediğini tespit ediyoruz.
- Eğer CSS animasyonu içermiyorsa kukla bir
animationendolayı ateleyerek simule ediyoruz. - Geri kalan kısım da herhangi bir değişiklik yapmaya gerek yok, çünkü CSS animasyonu olsa da, olmasa da aynı olayları (birisi kukla olsa bile) 2. saniye de veya 0. de ateşleyecekleri için kodumuzun kalan kısmı düzgün çalışacaktır.
- Böylelikle herhangi bir sebepten ötürü CSS animasyonu içermeyen elemanımız anında DOM ağacından kaldırılacaktır.
Örnek
<html>
<style>
@keyframes hideElement {
from {opacity: 1}
to {opacity: 0}
}
span { }
</style>
<span>Merhaba!</span>
<script>
var event,
span = document.querySelector('span');
window.getComputedStyle(span)["animationName"]) == 'none' ? triggerEvent(span) : void 0;
span.addEventListener('animationend', function(){
this.remove();
});
function triggerEvent(span) {
event = new CustomEvent("animationend");
span.dispatchEvent(event);
}
</script>
</html>Son örneğimizde CSS animasyonu içermeyen span { } elemanımızın tespit edilip, kukla olay ile 0. sn de DOM ağacından kaldırılması işlemini kodlamış olduk.
Bu sayede animasyonu bozulan, ekisik veya yanlış girilen ve herhangi bir sebeple tanımsız olan elemanımız (Örn: Şifre alanı) kişi gizle butonuna basar basmaz DOM ağacından anında kaldırılacaktır. Burada kullanıcı sadece animasyonu göremecek fakat sistem düzgün çalışmaya devam edecektir. Böylelikle sayfaya olan güvenini yitirmeyecektir.
Aşağıdaki codepen örneğinde animasyon içermeyen bir öğrenin nasıl tespit edildiğini test edebilirsiniz.
Sol alt köşedeki “Console” butonuna tıklamayı unutmayın!
Kolay gelsin.