پویانمایی به اندازه‌های درونی

پویانمایی عناصر به اندازه‌های پویا مانند block-size: auto یا inline-size: max-content در گذشته به جاوا اسکریپت یا هک‌های شکننده «max-height» نیاز داشت. ویژگی interpolate-size و تابع calc-size() به مرورگر اجازه می‌دهند تا به‌طور بومی بین طول‌های ثابت و کلیدواژه‌های اندازه‌گذاری ذاتی درون‌یابی کند.

مراحل پیاده‌سازی

1. موافقت با درون‌یابی کلیدواژه: interpolate-size: allow-keywords را روی عنصر اصلی (معمولاً :root) اعمال کنید تا انتقال‌ها برای ویژگی‌هایی که از کلیدواژه‌های ذاتی استفاده می‌کنند فعال شود.
2. تعریف کردن گذار: یک transition برای ویژگی اندازه‌گذاری (مثلاً block-size، inline-size) در عنصر هدف تنظیم کنید.
3. استفاده از کلیدواژه‌های ذاتی: ویژگی اندازه‌گذاری را درطول تعامل (مثلاً :hover یا کلاس حالت) به کلیدواژه ذاتی پشتیبانی‌شده (auto،‏ min-content،‏ max-content،‏ fit-content، یا (برای flex-basis) content) تغییر دهید.
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;
}

مثال: Calculated Intrinsic Inline-Size

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