Our current transition-default Tailwind utility applies transitions to all properties, leading to potential performance impact. We should revisit the util to target specific properties.
As a first step, we could look into targeting a reduced set of essential/common transition properties.
Proposed Advantages
Improved performance by having browser transition relevant, or common, CSS properties.
Description
Our current
transition-default
Tailwind utility applies transitions to all properties, leading to potential performance impact. We should revisit the util to target specific properties.As a first step, we could look into targeting a reduced set of essential/common transition properties.
Proposed Advantages
Improved performance by having browser transition relevant, or common, CSS properties.
Which Component
All components using
transition-default
:alert
checkbox
chip
date-picker-day
date-picker-month-header
inline-editable
input-message
input-number
input-text
input
link
modal
navigation-logo
navigation-user
notice
pagination
radio-button
rating
shell-panel
split-button
tab-title
tile-select
tree-item
x-button
(functional component)Relevant Info
List of all animatable CSS properties
See https://vallek.github.io/animatable-css/#anim 1. **Colors** - `color` - `background-color` - `border-color` - `outline-color` - `fill` - `stroke` 2. **Dimensions** - `width` - `height` - `max-width` - `max-height` - `min-width` - `min-height` 3. **Margins, Padding, and Borders** - `margin` - `margin-top` - `margin-right` - `margin-bottom` - `margin-left` - `padding` - `padding-top` - `padding-right` - `padding-bottom` - `padding-left` - `border-width` - `border-top-width` - `border-right-width` - `border-bottom-width` - `border-left-width` - `border-spacing` 4. **Positioning** - `top` - `right` - `bottom` - `left` - `z-index` 5. **Backgrounds** - `background-size` - `background-position` 6. **Fonts and Text** - `font-size` - `font-weight` - `line-height` - `letter-spacing` - `text-indent` - `text-shadow` - `word-spacing` 7. **Transforms** - `transform` (includes transformations like `translate`, `scale`, `rotate`, `skew`) 8. **Opacity, Visibility, and Display** - `opacity` - `visibility` 9. **Filters** - `filter` (includes functions like `blur`, `brightness`, `contrast`, `drop-shadow`, `grayscale`, `hue-rotate`, `invert`, `saturate`, `sepia`) 10. **Box and Text Shadows** - `box-shadow` - `text-shadow` 11. **Outline** - `outline-width` - `outline-offset` 12. **Clip Paths** - `clip-path` 13. **Object Position** - `object-position` 14. **Flexbox and Grid** - `flex-grow` - `flex-shrink` - `flex-basis` - `grid-template-columns` - `grid-template-rows` - `grid-gap` - `grid-row-gap` - `grid-column-gap` 15. **Others** - `column-count` - `column-gap` - `column-width` - `perspective` - `perspective-origin` - `scroll-margin` - `scroll-padding`
Calcite package