Các tiện ích để kiểm soát hành vi của CSS transition.
| Class | Styles |
|---|---|
transition-normal | transition-behavior: normal; |
transition-discrete | transition-behavior: allow-discrete; |
Sử dụng tiện ích transition-discrete để bắt đầu transition khi thay đổi các thuộc tính với tập giá trị rời rạc, chẳng hạn như các phần tử thay đổi từ hidden sang block:
Tương tác với các checkbox để thấy hành vi mong đợi
<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>Prefix a transition-behavior utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<button class="transition-discrete md:transition-normal ..."> <!-- ... --></button>Learn more about using variants in the variants documentation.