Kütüphane Olmadan Giriş ve Çıkış Animasyonları

{show && } ile koşullu oluşturma yaptığınızda, show false olur olmaz React öğeyi DOM'dan kaldırır. Düğüm artık ortada olmadığı için çıkış animasyonuna zaman kalmaz.

Giriş animasyonları kolaydır; asıl zorluk çıkış animasyonlarıdır.

En basit çözüm, öğeyi hiç kaldırmamaktır. Öğeyi oluşturmaya devam edin; gizlendiğinde opacity değerini sıfıra ve pointer-events: none değerine ayarlayarak, gösterildiğinde ise tekrar bire çıkararak canlandırın.

Bu yöntem, öğenin DOM'da kalması pahasına her iki yönde de yumuşak belirmeler sağlar.

Gerçekten kaldırmak için mounting, mounted, unmounting ve unmounted gibi aşamalardan oluşan küçük bir durum makinesi modelleyin. Düğümü yalnızca çıkış animasyonu tamamlandıktan sonra kaldırın.

Durum, her aşamada hangi animasyon sınıflarının uygulanacağını belirler.

Makineyi genellikle useMount adı verilen özel bir kancada kapsülleyebilirsiniz. Bu kanca, istenen görünürlüğü alır ve öğenin DOM'da bulunup bulunmaması gerektiğiyle birlikte geçerli aşamasını döndürür.

Zamanlama mantığı yeniden kullanılabilir kancada bulunduğu için bileşenler temiz kalır.

Yaygın kurallardan yararlanarak DOM'a eklenirken önce enter, ardından enter-active; kaldırılırken önce exit, ardından exit-active sınıflarını uygulayın. Temel sınıf başlangıç durumunu, etkin sınıf ise geçişle birlikte son durumu belirler.

İki sınıf arasında doğru karede geçiş yapmak animasyonu oluşturur.

Bir çıkış animasyonunun ne zaman tamamlandığını öğrenmek için öğedeki transitionend olayını dinleyin. Olay çıkış için tetiklendiğinde durumu unmounted olarak değiştirin ve düğümü kaldırın.

Bu yöntem, DOM'dan kaldırma işlemini tahmini bir zaman aşımı yerine görsel animasyonun sonuna tam olarak bağlar.

Tüm bunları bir Transition bileşeninde kapsülleyebilirsiniz; bu bileşen bir in özelliği ve alt öğeler alır. Alt öğeleri çıkış animasyonları boyunca DOM'da tutar ve her aşamaya uygun sınıfları uygular.

Bileşeni kullananlar yalnızca in değerini değiştirerek doğru giriş ve çıkış hareketlerine ek bir işlem yapmadan sahip olur.

İnce bir ayrıntı şudur: etkin sınıfı eklemeden önce tarayıcının başlangıç sınıfını çizmesine izin vermelisiniz; aksi halde öğe geçiş olmadan sıçrar. İki işlem arasına bir requestAnimationFrame veya zorunlu yeniden akış eklemek geçişin gerçekten çalışmasını sağlar.

Bu, tarayıcının önce başlangıç değerlerini kaydetmesini garanti eder.

react-transition-group kitaplığı, sınıf yaşam döngüsü ve DOM'dan kaldırma zamanlaması da dahil olmak üzere bu örüntüyü tam olarak uygulayan Transition ve CSSTransition bileşenlerini sağlar.

DIY sürümünüz kitaplığın temel fikirlerini yansıtır; bu nedenle bir tanesini kendiniz oluşturduktan sonra kitaplığı anlamak kolaylaşır.

Tek bir basit belirme efekti için DOM'da tutma yaklaşımı veya küçük bir kanca yeterlidir ve bağımlılık eklemekten kaçınmanızı sağlar. Birden çok eşgüdümlü geçiş, ekleme ve kaldırma işlemleri içeren listeler ya da karmaşık sıralamalar için kitaplık kullanmak zaman kazandırır ve uç durum hatalarını azaltır.

Seçiminizi, uygulamanızın gerçekte ne kadar animasyon karmaşıklığına ihtiyaç duyduğuna göre yapın.

Çıkış animasyonları, öğe animasyonu tamamlanana kadar canlı tutulmasını gerektirir. Bunu öğeyi hiç kaldırmayarak, transitionend ile birlikte bir durum makinesi kullanarak veya bir kitaplıktan yararlanarak yapabilirsiniz.

İşleyişi anlamak, ihtiyaçlarınızı karşılayan en hafif yaklaşımı seçmenizi sağlar.

Çıkış animasyonlarını anlayıp anlamadığınızı sınayın.

Çıkış animasyonlarının neden zor olduğunu, iki çözümü (DOM'da tutma ve DOM'a ekleme durum makinesi), transitionend'in DOM'dan kaldırma zamanını nasıl belirlediğini ve yeniden kullanılabilir bir Transition bileşeninin nasıl oluşturulacağını öğrendiniz.

Ayrıca DIY yerine ne zaman react-transition-group kullanmanız gerektiğini gördünüz.