@dash-ui/transition NPM

A library for creating CSS transitions with dash-ui

npm i @dash-ui/transition

Quick Start

Check out an example on CodeSandbox

import { styles } from "@dash-ui/styles";
import transition from "@dash-ui/transition";

styles.insertTokens({
  transition: {
    duration: {
      slow: "1s",
    },
  },
});

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

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