Transition

Utilities for controlling transitions.

Usage

Use transition={value} to specify transitions.

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

Prefers-reduced-motion

You can conditionally apply animations and transitions using the motionSafe and motionReduce states:

<x.button
  color={{ hover: 'red' }}
  transition={{ _: true, motionReduce: 'none' }}
>
  Hover me
</x.button>

Responsive

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

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

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

Customizing

Transitions

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

  // theme.js

  export const theme = {
    transitions: {
      // ...
+     light: 'color 300ms ease-in-out'
    },
  }

If you don't want to customize it, a set of transitions is already present in default theme. Values are the same as the values accepted in transitionProperty.

Styled bindings

Automatic

Using xstyled's styled, all transitions defined are automatically bound to transition attribute:

import styled from '@xstyled/...'

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

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

Manual

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

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

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

Hooks

Get a transition in any component using useTransition hook:

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

function Button() {
  const transition = useTransition('default')
}