मूल साइज़ के हिसाब से ऐनिमेट करना

block-size: auto या inline-size: max-content जैसे डाइनैमिक साइज़ में एलिमेंट को ऐनिमेट करने के लिए, पहले JavaScript या "max-height" हैक का इस्तेमाल करना पड़ता था. हालांकि, ये हैक आसानी से काम नहीं करते थे. interpolate-size प्रॉपर्टी और calc-size() फ़ंक्शन की मदद से, ब्राउज़र तय लंबाई और इंट्रिन्सिक साइज़िंग कीवर्ड के बीच नेटिव तौर पर इंटरपोलेट कर सकता है.

लागू करने के चरण

1. कीवर्ड इंटरपोलेशन के लिए ऑप्ट-इन करना: पैरंट एलिमेंट (आम तौर पर :root) पर interpolate-size: allow-keywords लागू करें, ताकि इंट्रिन्सिक कीवर्ड का इस्तेमाल करने वाली प्रॉपर्टी के लिए ट्रांज़िशन चालू किए जा सकें.
2. ट्रांज़िशन तय करें: टारगेट एलिमेंट पर साइज़िंग प्रॉपर्टी (जैसे, block-size, inline-size) के लिए transition सेट करें.
3. इंट्रिन्सिक कीवर्ड इस्तेमाल करें: इंटरैक्शन के दौरान, साइज़ प्रॉपर्टी को किसी ऐसे इंट्रिन्सिक कीवर्ड में बदलें जो काम करता हो.जैसे, auto, min-content, max-content, fit-content या (फ़्लेक्स-बेसिस के लिए) content. इंटरैक्शन के उदाहरण: :hover या स्टेट क्लास.
4. कैलकुलेशन करना (ज़रूरी नहीं): अगर आपको किसी इंट्रिन्सिक साइज़ (जैसे, auto + 2rem) पर मैथ का इस्तेमाल करना है, तो calc-size() का इस्तेमाल करें. calc-size(), बेसिस-एग्नोस्टिक कैलकुलेशन के लिए any कीवर्ड के साथ भी काम करता है.

उदाहरण: सामान्य एक्सपैंशन पैटर्न

इस पैटर्न को किसी भी कंटेनर (जैसे, "ज़्यादा दिखाएं" सेक्शन या नेविगेशन मेन्यू) पर लागू किया जा सकता है. इससे, सीमित ऊंचाई और एलिमेंट के सामान्य साइज़ के बीच ट्रांज़िशन किया जा सकता है.

/* 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;
}

उदाहरण: कैलकुलेट किया गया इंट्रिन्सिक इनलाइन-साइज़

.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);
}

उदाहरण: इंट्रिन्सिक से फ़िक्स्ड पर ट्रांज़िशन

इसके अलावा, ऐनिमेशन को उल्टी दिशा में भी चलाया जा सकता है. जैसे, नैचुरल साइज़ से शुरू करके, किसी खास लंबाई तक छोटा करना. यह "खारिज किए जा सकने वाले" कॉम्पोनेंट के लिए मददगार है.

.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);
});

मुख्य शर्तें

• कीवर्ड से कीवर्ड पर जाने की पाबंदी: दो अलग-अलग कीवर्ड के बीच सीधे ऐनिमेशन नहीं किया जा सकता. उदाहरण के लिए, min-content से max-content पर. ट्रांज़िशन का एक सिरा, तय लंबाई या प्रतिशत होना चाहिए. उदाहरण के लिए, 0 से auto पर.
• Calc-size सिंटैक्स: calc-size() में, एक ही एक्सप्रेशन में अलग-अलग इंट्रिन्सिक कीवर्ड को मिक्स नहीं किया जा सकता. पहला आर्ग्युमेंट (आधार) यह तय करता है कि size क्या दिखाता है.
• शामिल होने की ज़रूरी शर्त: पुराने सिस्टम के साथ काम करने की सुविधा को बनाए रखने के लिए, इंट्रिन्सिक कीवर्ड में ट्रांज़िशन डिफ़ॉल्ट रूप से बंद (numeric-only) होते हैं. आपको एलिमेंट या पैरंट एलिमेंट पर interpolate-size: allow-keywords लागू करना होगा. calc-size(), हर प्रॉपर्टी के लिए ओवरराइड के तौर पर काम करता है. इसका इस्तेमाल करने पर, इंटरपोलेशन अपने-आप चालू हो जाता है.

फ़ॉलबैक रणनीतियां

interpolate-size और calc-size(), प्रोग्रेसिव एन्हांसमेंट हैं. जिन ब्राउज़र पर यह सुविधा काम नहीं करती वे सीधे टारगेट साइज़ पर स्विच कर जाएंगे.

• अनुकूल गिरावट: आसान block-size: auto ट्रांज़िशन के लिए, स्टैंडर्ड ब्राउज़र साइज़ को तुरंत टॉगल कर देंगे. यह काम तो करता है, लेकिन उतना बेहतर नहीं होता.
• मैन्युअल कीवर्ड फ़ॉलबैक: calc-size() का इस्तेमाल करते समय, पुराने ब्राउज़र के लिए हमेशा एक स्टैंडर्ड कीवर्ड फ़ॉलबैक दें. ऐसा इसलिए, क्योंकि वे पूरे calc-size() एलान को खारिज कर देंगे.

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