고유 크기로 애니메이션 적용

웹 기능: calc-size() interpolate-size

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. 고유 키워드 사용: 상호작용(예: :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;
}

예: 계산된 고유 인라인 크기

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

예: Intrinsic에서 Fixed로 전환

반대 방향으로 애니메이션을 적용할 수도 있습니다. 즉, 자연스러운 크기에서 시작하여 특정 길이로 축소할 수 있습니다. 이는 '닫을 수 있는' 구성요소에 유용합니다.

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