---

npm i @-ui/transition

---

A library for creating CSS transitions with -ui

Quick Start

import styles from '@-ui/styles'
import transition from '@-ui/transition'

styles.variables({
  transitions: {
    duration: {
      slow: '1s',
    },
  },
})

const fade = transition(styles, {
  // default styles and options
  default: {
    duration: 100,
  },
  // Use a callback to access variables
  in: ({transitions}) => ({
    opacity: 1,
    duration: transitions.duration.slow,
  }),
  out: {
    opacity: 0,
  },
})

const Component = ({visible}) => (
  <div className={fade(visible ? 'in' : 'out')}>
    <div className={fade({in: visible, out: !visible})}>Foo</div>
  </div>
)

API

LICENSE

MIT