Transition

Transition is a container element used for transitioning child components.

The base of the component was provided by Adam Watham from Tailwind in a GitHub Gist.

Import

import { Transition } from '@sajari-ui/core';

import { Transition } from '@sajari-ui/core';

Usage

Editable Example

function Example() {
  const [show, setShow] = React.useState(false);

  return (
    <Flex space="space-x-4" alignItems="items-center">
      <Button appearance="primary" onClick={() => setShow(!show)}>
        Toggle
      </Button>

      <Transition
        show={show}
        enter={['ease-out', 'duration-300']}
        enterFrom={['opacity-0', 'scale-75']}
        enterTo={['opacity-100', 'scale-100']}
        leave={['ease-in', 'duration-200']}
        leaveFrom={['opacity-100', 'scale-100']}
        leaveTo={['opacity-0', 'scale-75']}
      >
        <Box transitionProperty="transition-all" transform="transform">
          Fade me in!
        </Box>
      </Transition>
    </Flex>
  );
}

function Example() {
  const [show, setShow] = React.useState(false);
  return (
    <Flex space="space-x-4" alignItems="items-center">
      <Button appearance="primary" onClick={() => setShow(!show)}>
        Toggle
      </Button>
      <Transition
        show={show}
        enter={['ease-out', 'duration-300']}
        enterFrom={['opacity-0', 'scale-75']}
        enterTo={['opacity-100', 'scale-100']}
        leave={['ease-in', 'duration-200']}
        leaveFrom={['opacity-100', 'scale-100']}
        leaveTo={['opacity-0', 'scale-75']}
      >
        <Box transitionProperty="transition-all" transform="transform">
          Fade me in!
        </Box>
      </Transition>
    </Flex>
  );
}

Staggered

Editable Example

function Example() {
  const [show, setShow] = React.useState(false);

  return (
    <>
      <Button appearance="primary" onClick={() => setShow(!show)}>
        Toggle
      </Button>
      <Box space="space-y-4">
        <Transition
          show={show}
          enter={['ease-in', 'duration-200', 'delay-500']}
          enterFrom={['opacity-0', '-translate-y-2']}
          enterTo={['opacity-100', 'translate-y-0']}
          leave={['ease-in', 'duration-300', 'delay-500']}
          leaveFrom={['opacity-100', 'translate-y-0']}
          leaveTo={['opacity-0', '-translate-y-2']}
        >
          <Heading as="h1" size="lg" margin="mt-4" transitionProperty="transition-all" transform="transform">
            Heading
          </Heading>
        </Transition>

        <Transition
          show={show}
          enter={['ease-in', 'duration-200', 'delay-700']}
          enterFrom={['opacity-0', '-translate-y-2']}
          enterTo={['opacity-100', 'translate-y-0']}
          leave={['ease-in', 'duration-300', 'delay-300']}
          leaveFrom={['opacity-100', 'translate-y-0']}
          leaveTo={['opacity-0', '-translate-y-2']}
        >
          <Text transitionProperty="transition-all" transform="transform">
            Lorem magna labore ad dolore. Amet dolor Lorem reprehenderit quis quis magna ex fugiat et enim. Sit aliquip
            quis deserunt consequat quis adipisicing sint duis tempor qui nulla.
          </Text>
        </Transition>

        <Transition
          show={show}
          enter={['ease-in', 'duration-200', 'delay-1000']}
          enterFrom={['opacity-0', '-translate-y-2']}
          enterTo={['opacity-100', 'translate-y-0']}
          leave={['ease-in', 'duration-300']}
          leaveFrom={['opacity-100', 'translate-y-0']}
          leaveTo={['opacity-0', '-translate-y-2']}
        >
          <Box transitionProperty="transition-all" transform="transform">
            <Button>Action</Button>
          </Box>
        </Transition>
      </Box>
    </>
  );
}

function Example() {
  const [show, setShow] = React.useState(false);
  return (
    <>
      <Button appearance="primary" onClick={() => setShow(!show)}>
        Toggle
      </Button>
      <Box space="space-y-4">
        <Transition
          show={show}
          enter={['ease-in', 'duration-200', 'delay-500']}
          enterFrom={['opacity-0', '-translate-y-2']}
          enterTo={['opacity-100', 'translate-y-0']}
          leave={['ease-in', 'duration-300', 'delay-500']}
          leaveFrom={['opacity-100', 'translate-y-0']}
          leaveTo={['opacity-0', '-translate-y-2']}
        >
          <Heading as="h1" size="lg" margin="mt-4" transitionProperty="transition-all" transform="transform">
            Heading
          </Heading>
        </Transition>
        <Transition
          show={show}
          enter={['ease-in', 'duration-200', 'delay-700']}
          enterFrom={['opacity-0', '-translate-y-2']}
          enterTo={['opacity-100', 'translate-y-0']}
          leave={['ease-in', 'duration-300', 'delay-300']}
          leaveFrom={['opacity-100', 'translate-y-0']}
          leaveTo={['opacity-0', '-translate-y-2']}
        >
          <Text transitionProperty="transition-all" transform="transform">
            Lorem magna labore ad dolore. Amet dolor Lorem reprehenderit quis quis magna ex fugiat et enim. Sit aliquip
            quis deserunt consequat quis adipisicing sint duis tempor qui nulla.
          </Text>
        </Transition>
        <Transition
          show={show}
          enter={['ease-in', 'duration-200', 'delay-1000']}
          enterFrom={['opacity-0', '-translate-y-2']}
          enterTo={['opacity-100', 'translate-y-0']}
          leave={['ease-in', 'duration-300']}
          leaveFrom={['opacity-100', 'translate-y-0']}
          leaveTo={['opacity-0', '-translate-y-2']}
        >
          <Box transitionProperty="transition-all" transform="transform">
            <Button>Action</Button>
          </Box>
        </Transition>
      </Box>
    </>
  );
}

Child Transition components

The value of show will flow down the tree to child components to make chaining animations easier.

Props

The Transition component has the following props.

export type TransitionStyleProps =
  | TransitionProperty
  | TransitionDuration
  | TransitionTimingFunction
  | TransitionDelay
  | TransformOrigin;

export type TransformStyleProps = Transform | Scale | Rotate | Translate | Skew | Opacity;

export type TransitionStyleProps =
  | TransitionProperty
  | TransitionDuration
  | TransitionTimingFunction
  | TransitionDelay
  | TransformOrigin;
export type TransformStyleProps = Transform | Scale | Rotate | Translate | Skew | Opacity;

Name	Type	Description
`show`	`boolean`	Show the transition.
`enter`	`TransitionStyleProps`, `Array<TransitionStyleProps>`	Properties to set before the transition in begins.
`enterFrom`	`TransformStyleProps`, `Array<TransformStyleProps>`	Properties to set at the beginning of transitioning in.
`enterTo`	`TransformStyleProps`, `Array<TransformStyleProps>`	Properties to transition in to.
`leave`	`TransitionStyleProps`, `Array<TransitionStyleProps>`	Properties to set before the transition out begins.
`leaveFrom`	`TransformStyleProps`, `Array<TransformStyleProps>`	Properties to set at the beginning of transitioning out.
`leaveTo`	`TransformStyleProps`, `Array<TransformStyleProps>`	Properties to transition out to.
`appear`	`boolean`	Transition on show.
`children`	`React.ReactNode`	Properties to set before the transition begins.