트랜지션 동작

트랜지션 동작 (Transition Behavior)

값이 이산적(discrete)으로 변하는 속성의 트랜지션 시작 방식을 정해주는 유틸리티예요. hidden에서 block처럼 한 번에 바뀌는 속성도 부드럽게 전환되게 만들 수 있어요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

transition-normal transition-behavior: normal;

transition-discrete transition-behavior: allow-discrete;

예시 (Examples)

기본 예제 (Basic example)

transition-discrete 유틸리티를 사용하면 hidden에서 block으로 바뀌는 요소처럼 값의 집합이 이산적인 속성을 바꿀 때 트랜지션을 시작할 수 있어요.

<label class="peer ...">
  <input type="checkbox" checked />
</label><button class="hidden transition-all not-peer-has-checked:opacity-0 peer-has-checked:block ...">
  I hide
</button><label class="peer ...">
  <input type="checkbox" checked />
</label><button class="hidden transition-all transition-discrete not-peer-has-checked:opacity-0 peer-has-checked:block ...">
  I fade out
</button>

반응형 디자인 (Responsive design)

transition-behavior 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.

<button class="transition-discrete md:transition-normal ...">
  <!-- ... -->
</button>

변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.