CSS’de Transition İptal Etme – Durdurma İşlemi

Özellikle Angular gibi, view tarafında DOM objelerinin fazla değişmediği uygulamalarda, CSS'in transition özelliği ile animasyon yönetimi sağlıyorsanız, bazı durumlarda Javascript tarafında bir olay gerçekleştiğinde, animasyonun durmasını veya gerçekleşmemesini isteyebiliyorsunuz.

Ben bu durumla karşılaştığımda, biraz baş ağrısı yaşadıktan sonra, transition öldürülecek DOM objesinin, transition özelliğini geçici olarak overwrite etme çözümü ile sorunumu çözdüm.

Basit bir şekilde çözüm mantığımı anlatmaya çalışayım.

<div id="domElem" class="domClass">
   Üzerine gel!
</div>
<button onclick="transitionDurdur()">Animasyonu Durdur!</button>

HTML'de bir div elementim ve bunun class-id attributionları belirli. Ek olarak bir buton ile bu animasyonu iptal etmek üzere onclick fonksiyonunu sayfaya bağladık.

.domClass {
   color:#000;
   transition:color 3s;
}
.domClass:hover {
   color:#ccc;
}
.transitionDur {
   transition:0ms !important;
}

CSS tarafında bu div'in rengini ve üzerine gelindiğinde değişeceği rengi belirledim. Bu değişimi de transition ile 3 saniye içerisinde gerçekleşmek üzere ayarladık. Ek olarak transitionDur class'ı için animasyon süresini 0ms'ye overwrite edilecek şekilde ayarları yaptık.

var transitionDurdur = function(){
  var elem = document.getElementById("domElem");
  elem.className = elem.className + " transitionDur";
    setTimeout(function(){
        elem.className = elem.className.replace(" transitionDur", "");
    }, 1);
}

Burada, className değerine transitionDur özelliğini ekleyip, 1ms sonra tekrar çıkartarak, dom elemanının animasyonunu durdurduk.

CSS
Yorumları Göster veya Yeni Yorum Yaz