Transition

Style a component's transition properties

import { transition } from 'jynx'

The transition function gives you control of a component's transition styles, providing support for both the shorthand property and all its sub-properties including transition-property, transition-duration, transition-delay, etc.

Usage

To use the transition function, create a component using the TransitionProps type and include the function within it's style argument.

/* Import the function and its corresponding props type */
import { transition, TransitionProps } from 'jynx'


/* Then define a component with the type and include the 
 function within its style argument */
export const Component = styled.div<TransitionProps>`
    ${transition}
  `

/* Or using the legacy functional syntax */
export const Component = styled.div<TransitionProps>((props) => `
    ${transition}
  `)

Props

By default, when passing a string to any transition props, the raw css value is used. This means you can define transition styles however you normally would:

<Component transition='all 0.3s ease-in-out' />

Time-based properties like transitionDelay and transitionDuration can also be passed as a numeric value.

numbers between 0 and 1 or decimals are converted to seconds (e.g. 0.3 => '0.3s')
integers above 1 are converted to milliseconds (e.g. 300 => '300ms')

Additionally, any standard named values (inherit, initial, etc) are available to use, and when using typescript, will show up as suggestions in your IDE.

Theming

You can create a transitions scale within your theme, which is then accessible in the transition shorthand prop.

This can be defined as any valid scale type and the values will be shown as suggestions in your IDE.

/* simple array-based scale */
export const theme = {
  transitions: [
    'all 0.3s cubic-bezier(0.85, 0, 0.15, 1)',
    'all 0.45s cubic-bezier(0.64, 0, 0.78, 0)',
    'all 0.6s ease-out'
  ]
}

/* simple object-based scale */
export const theme = {
  transitions: {
    primary: 'all 0.3s cubic-bezier(0.85, 0, 0.15, 1)',
    secondary: 'all 0.45s cubic-bezier(0.64, 0, 0.78, 0)',
    tertiary: 'all 0.6s ease-out'
  }
}

Types

When working in typescript, use the TransitionProps interface to provide reliable type definitions for your components and value suggestions in your IDE.

interface TransitionProps {
  transition?: StyleProp<CSS.Property.Transition | ThemeValue<'transitions'>>
  transitionProperty?: StyleProp<CSS.Property.TransitionProperty>
  transitionDuration?: StyleProp<CSS.Property.TransitionDuration<string | 0 | number>
  transitionTimingFunction?: StyleProp<CSS.Property.TransitionTimingFunction>
  transitionDelay?: StyleProp<CSS.Property.TransitionDelay<string | 0 | number>>
}

API

The transition function allows for a number of props to be passed to your component from directly within your jsx / tsx. Select props also have shorthand aliases that can be used for a more concise syntax.

Prop	CSS Property	Theme Scale
transition	transition	transitions
transitionProperty	transition-property
transitionDuration	transition-duration
transitionTimingFunction	transition-timing-function
transitionDelay	transition-delay

Examples

/* using plain CSS values */
<Component transition='all 0.3s ease-in-out' />


/* with a theme scale defined */
/* `theme.transitions[0]` */
<Component transition={0} />

/* `theme.transitions.secondary` */
<Component transition='secondary' />


/* based on a conditional */
<Component transitionDelay={isOpen ? 0.3 : 0} />


/* using responsive styles */
<Component transitionDuration={[300, null, 450]} />

<Component transitionDuration={{ _: 300, md: 450 }} />


/* using responsive styles with theme scales */
<Component transition={[0, 1, null, 0]} />

<Component transition={{_: 'primary', sm: 'secondary' lg: 'primary'}} />