CSS geçişleri etkileşim oluşturmanın harika bir yoludur. Bu kadar yeter, transition bir öğenin başlangıç durumuna getirilir ve tarayıcı iki durum arasındaki geçişi canlandırır. Aşağıdaki gibi içsel öğe boyutlarına yönelik geçişler auto Ancak, onlarca yıldır web geliştiricileri için bir sorun olmuştur ve tek seçenek, yüksekliği JavaScript kullanarak dinamik olarak hesaplamaktı.
Diğer bir zorluk ise, bir öğe ilk stilini aldığında (örneğin, DOM'a eklendiğinde veya display-değeri none değişiklikler. Bu makalede, bu sorunun aşağıdaki gibi yeni CSS özellikleriyle nasıl çözüleceği açıklanmaktadır: calc-size(), interpolate-size, @starting-style ve transition-behavior yönetilebilir.
Ile çözüm calc-size()
Kapalı durumdan gelen bir DOM öğesi varsa (height: 0) açık duruma (height: auto) devam ederse, animasyon genellikle yürütülmez. transitionÖzellik ayarlanmıştır. Bunun nedeni, tarayıcıların aşağıdaki gibi içsel boyutlara geçişleri desteklememesidir: auto Destek. Yeni olan calc-size()Ancak fonksiyon, bu içsel niceliklere ilişkin hesaplamalara ve dolayısıyla geçişlere de olanak sağlar.:
f95f6dcb193aa903adc84ce47bc4a296
The calc-size()-İşlev henüz tüm tarayıcılarda mevcut değildir. Orijinali koruyarak bir geri dönüş elde edilebilir height: auto-Beyanname elde edilebilir.
Ile çözüm interpolate-size
The interpolate-sizeÖzelliği, tarayıcıların enterpolasyon davranışını ayarlamanıza ve aşağıdaki gibi anahtar kelimeler arasında ayrım yapıp yapmayacağınıza karar vermenize olanak tanır: auto enterpolasyon yapmalıdır. Varsayılan olarak enterpolasyon yalnızca sayısal değerler arasında gerçekleşir. İle allow-keywords Ancak anahtar kelimeler arasında geçişleri etkinleştirebilirsiniz:
f95f6dcb193aa903adc84ce47bc4a296
Senin tarafından interpolate-size: allow-keywords üzerinde :rootÖğesini kullanarak yeni davranışı sayfanın tamamı için etkinleştirirsiniz.
Geçiş display:none
Bir unsur kullanıldığında başka bir sorun ortaya çıkar. display:none görünür bir duruma geçer. Orada display canlandırılabilir bir özellik değildir, animasyon oluşmaz. Yeni CSS işlevleri burada yardımcı olur @starting-style ve transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
İle birlikte transition-behavior: allow-discrete animasyonun önceden yürütülmesini sağlar display-değeri block Açık none değiştirildi. Bu kurallar, ilk stil güncellemesi sırasında bile geçişlerin yürütülmesine izin verir. @starting-styleKuralı, animasyonun ilk stil güncellemesinde doğru şekilde çalışmasını sağlar.
Tarayıcı desteği
Şu anda yeni özellikler calc-size() ve interpolate-size henüz tüm tarayıcılar tarafından desteklenmemektedir. Bunlar Chrome'da bir deneme bayrağının arkasında mevcuttur, ancak henüz Safari ve Firefox'ta mevcut değildir. Aynı şekilde, destek transition-behavior Chrome ve Edge'de mevcut ancak Safari ve Firefox'ta mevcut değil. Umarım bu gelecekte değişecektir.