Transition Property

Utilities for controlling which CSS properties transition.

Usage

Use transitionProperty={keyword} utilities to specify which properties should transition when they change.

<x.button
  transition
  transitionProperty="background-color"
  transitionDuration={500}
  color="white"
  bg={{ _: 'indigo-600', hover: 'red-600' }}
  py={3}
  px={6}
  borderRadius="md"
>
  Hover me
</x.button>

Responsive

To change which properties of an element transition at a specific breakpoint, use responsive object notation. For example, adding the property transitionProperty={{ md: "all" }} to an element would apply the transitionProperty="all" utility at medium screen sizes and above.

<x.div transitionProperty={{ md: 'all' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Customizing

Transition Properties

If you'd like to customize your values for transition properties, use the theme.transitionProperties section of your theme.

  // theme.js

  export const theme = {
    transitionProperties: {
      // ...
      colors: ['background-color', 'border-color', 'color', 'fill', 'stroke'],
      opacity: ['opacity'],
      shadow: ['box-shadow'],
      transform: ['transform'],
+     dialogs: ['box-shadow', 'transform'],
    },
  }

If you don't want to customize it, a set of transitionProperties is already defined in default theme:

const defaultTheme = {
  // ...
  transitionProperties: {
    default: [
      'background-color',
      'border-color',
      'color',
      'fill',
      'stroke',
      'opacity',
      'box-shadow',
      'transform',
    ],
    colors: ['background-color', 'border-color', 'color', 'fill', 'stroke'],
    opacity: ['opacity'],
    shadow: ['box-shadow'],
    transform: ['transform'],
  },
}

Styled bindings

Automatic

Using xstyled's styled, all transition properties defined are automatically bound to transition-property attribute:

import styled from '@xstyled/...'

const Button = styled.button`
  transition-property: default;
`

To learn more about styled syntax, read styled syntax documentation.

Manual

It is possible to manually bind a transition property using th.transitionProperty utility:

import styled from '...'
import { th } from '@xstyled/...'

const Button = styled.button`
  transition: ${th.transitionProperty('default')} 400ms;
`

Hooks

Get a transition property in any component using useTransitionProperty hook:

import { useTransitionProperty } from '@xstyled/...'

function Button() {
  const transitionProperty = useTransitionProperty('default')
}