Yerleşik boyutlara animasyon ekleme

Öğeleri block-size: auto veya inline-size: max-content gibi dinamik boyutlara animasyonla geçirmek için geçmişte JavaScript veya hassas "max-height" hileleri gerekiyordu. interpolate-size özelliği ve calc-size() işlevi, tarayıcının sabit uzunluklar ile içsel boyutlandırma anahtar kelimeleri arasında yerel olarak interpolasyon yapmasına olanak tanır.

Uygulama adımları

1. Anahtar kelime interpolasyonunu etkinleştirme: İçsel anahtar kelimeler kullanan özellikler için geçişleri etkinleştirmek üzere bir üst öğeye (genellikle :root) interpolate-size: allow-keywords uygulayın.
2. Geçişi tanımlayın: Hedef öğedeki boyutlandırma özelliği (ör. block-size, inline-size) için bir transition ayarlayın.
3. İçsel anahtar kelimeler kullanın: Bir etkileşim sırasında (ör. :hover veya bir durum sınıfı) boyutlandırma özelliğini desteklenen bir içsel anahtar kelimeyle (auto, min-content, max-content, fit-content veya flex-basis için content) değiştirin.
4. Hesaplama yapma (isteğe bağlı): İçsel bir boyut üzerinde matematiksel işlem yapmanız gerekiyorsa (ör. auto + 2rem) calc-size() kullanın. calc-size(), temele bağlı olmayan hesaplamalar için any anahtar kelimesini de destekler.

Örnek: Genel Genişletme Deseni

Sınırlı bir yükseklik ile öğenin doğal boyutu arasında geçiş yapmak için bu kalıbı herhangi bir kapsayıcıya ("Daha Fazla Göster" bölümü veya gezinme menüsü gibi) uygulayabilirsiniz.

/* Opt-in globally for all children */
:root {
  /* MANDATORY: Transitions to intrinsic keywords are disabled by default for compatibility */
  interpolate-size: allow-keywords;
}

.expandable-container {
  /* 1. Define a fixed initial size (or 0) and hide overflow */
  block-size: 100px;
  overflow: hidden;
  
  /* 2. Transition the sizing property */
  transition: block-size 0.4s ease-out;
}

.expandable-container.is-expanded {
  /* 3. Smoothly animate to the intrinsic natural height */
  block-size: auto;
}

Örnek: Hesaplanmış İç Satır İçi Boyut

.badge {
  inline-size: 40px;
  overflow: hidden;
  white-space: nowrap;
  transition: inline-size 0.3s ease;
}

.badge:hover {
  /* calc-size(basis, calculation) */
  /* 'size' refers to the evaluated basis (max-content in this case) */
  inline-size: calc-size(max-content, size + 20px);
}

Örnek: İçselden sabite geçiş

Ayrıca ters yönde de animasyon oluşturabilirsiniz. Doğal bir boyuttan başlayıp belirli bir uzunluğa daraltabilirsiniz. Bu, "kapatılabilir" bileşenler için kullanışlıdır.

.collapsible-alert {
  /* 1. Start with the natural content height */
  block-size: auto;
  overflow: hidden;
  transition: block-size 0.5s ease-in-out, opacity 0.5s ease;
}

.collapsible-alert.is-dismissed {
  /* 2. Smoothly collapse to zero */
  block-size: 0;
  opacity: 0;
  pointer-events: none;
}

/* MANDATORY Copy-Paste Safety: Disable sizing animations for sensitive users */
@media (prefers-reduced-motion: reduce) {
  .expandable-container,
  .badge,
  .collapsible-alert {
    transition: none !important;
  }
}

// MANDATORY Accessibility Synchronization: Ensure elements collapsed to zero dimensions are removed from the assistive technology tree, and sync aria-expanded states on triggers.
const alertElement = document.querySelector('.collapsible-alert');
alertElement.addEventListener('transitionend', (e) => {
  if (e.propertyName === 'block-size' && alertElement.classList.contains('is-dismissed')) {
    alertElement.hidden = true;
  }
});

// Example trigger syncer
const triggerBtn = document.querySelector('.accordion-trigger');
triggerBtn?.addEventListener('click', () => {
  const isExpanded = triggerBtn.getAttribute('aria-expanded') === 'true';
  triggerBtn.setAttribute('aria-expanded', !isExpanded);
});

Temel kısıtlamalar

• Anahtar kelimeden anahtar kelimeye kısıtlama: İki farklı anahtar kelime arasında doğrudan animasyon oluşturamazsınız (ör. min-content ile max-content arasında). Geçişin bir ucu sabit uzunluk veya yüzde olmalıdır (ör. 0 ile auto arasında).
• Calc-size Söz Dizimi: calc-size() içinde, aynı ifadede farklı içsel anahtar kelimeleri karıştıramazsınız. İlk bağımsız değişken (temel), size değerinin neyi temsil ettiğini tanımlar.
• Etkinleştirme Şartı: Geriye dönük uyumluluğu korumak için içsel anahtar kelimelere geçişler varsayılan olarak devre dışıdır (numeric-only). Öğeye veya bir üst öğeye interpolate-size: allow-keywords uygulamanız gerekir. calc-size(), her özellik için geçersiz kılma işlevi görür ve kullanıldığı her durumda interpolasyonu otomatik olarak etkinleştirir.

Yedek stratejiler

interpolate-size ve calc-size(), progresif geliştirmelerdir. Bu özelliği desteklemeyen tarayıcılar, anında hedef boyuta atlar.

• Kontrollü azalma: Basit block-size: auto geçişleri için standart tarayıcılar boyutu anında değiştirir. Bu işlevseldir ancak daha az şıktır.
• Manuel anahtar kelime yedekleri: calc-size() kullanırken eski tarayıcılar için her zaman standart bir anahtar kelime yedeği sağlayın. Eski tarayıcılar calc-size() beyanının tamamını siler.

.card {
  block-size: auto; /* Fallback for older browsers */
  block-size: calc-size(auto, size); /* Modern browsers use this */
  transition: block-size 0.3s ease;
}