트랜지션 & 애니메이션
transition-behavior
CSS 트랜지션 동작을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
transition-normal | transition-behavior: normal; |
transition-discrete | transition-behavior: allow-discrete; |
예제
기본 예제
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>반응형 디자인
접두사 a transition-behavior 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<button class="transition-discrete md:transition-normal ..."> <!-- ... --></button>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
