Утилиты для управления переходом свойств CSS.
transition
.transition { -webkit-transition-property: background-color, border-color, color, fill, stroke, opacity, -webkit-box-shadow, -webkit-transform, filter, backdrop-filter; -o-transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, -webkit-box-shadow, transform, -webkit-transform, filter, backdrop-filter; -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition-duration: 150ms; -o-transition-duration: 150ms; transition-duration: 150ms; }
export default {
theme: {
extend: {
transitionProperty: {
height: 'height',
spacing: 'margin, padding',
},
},
},
}
Утилиты для управления длительностью переходов CSS.
xxxxxxxxxx
duration-150
.duration-150 { -webkit-transition-duration: 150ms; -o-transition-duration: 150ms; transition-duration: 150ms; }
export default {
theme: {
extend: {
transitionDuration: {
zero: '0ms',
long: '2000ms',
},
},
},
}
Утилиты для управления плавностью переходов CSS.
xxxxxxxxxx
ease-linear
.ease-linear { -webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; }
export default {
theme: {
extend: {
transitionTimingFunction: {
'in-expo': 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)',
},
},
},
}
Утилиты для управления задержкой переходов CSS.
xxxxxxxxxx
delay-150
.delay-150 { -webkit-transition-delay: 150ms; -o-transition-delay: 150ms; transition-delay: 150ms; }
export default {
theme: {
extend: {
transitionDelay: {
zero: '0ms',
long: '2000ms',
},
},
},
}