Primitives

createTransition

Animate the presence of a component with predefined or custom transitions.

Import

tsx
import { createTransition } from "@hope-ui/core";

tsx
import { createTransition } from "@hope-ui/core";

Usage

The createTransition primitive allow you to work with enter/exit transitions. It takes two parameters :

A boolean | Accessor<boolean> used to decide whether the component should be mounted.
A TransitionOptions object used to customize the transition.

Animated box.

tsx
function BasicExample() {
  const [show, setShow] = createSignal(false);
  const { style } = createTransition(show, {
    transition: "fade",
    duration: 400,
    easing: "ease",
  });
  return (
    <>
      <Button onClick={() => setShow(prev => !prev)}>{show() ? "Hide" : "Show"}</Button>
      <Box p={4} color="white" mt="4" bg="primary.500" rounded="md" shadow="md" style={style()}>
        Animated box.
      </Box>
    </>
  );
}

tsx
function BasicExample() {
  const [show, setShow] = createSignal(false);
  const { style } = createTransition(show, {
    transition: "fade",
    duration: 400,
    easing: "ease",
  });
  return (
    <>
      <Button onClick={() => setShow(prev => !prev)}>{show() ? "Hide" : "Show"}</Button>
      <Box p={4} color="white" mt="4" bg="primary.500" rounded="md" shadow="md" style={style()}>
        Animated box.
      </Box>
    </>
  );
}

Predefined transitions

Hope UI includes several predefined transitions:

Custom transitions

Instead of using a predefined transition name, you can create your own transition object with these 3 properties:

in – styles for mounted state
out – styles for unmounted state
common (optional) – styles for both mounted and unmounted states

Animated box.

tsx
function CustomTransitionExample() {
  const [show, setShow] = createSignal(false);
  const { style } = createTransition(show, {
    transition: {
      in: { opacity: 1, transform: "scaleY(1)" },
      out: { opacity: 0, transform: "scaleY(0)" },
      common: { "transform-origin": "top" },
    },
    duration: 400,
    easing: "ease",
  });
  return (
    <>
      <Button onClick={() => setShow(prev => !prev)}>{show() ? "Hide" : "Show"}</Button>
      <Box p={4} color="white" mt="4" bg="primary.500" rounded="md" shadow="md" style={style()}>
        Animated box.
      </Box>
    </>
  );
}

tsx
function CustomTransitionExample() {
  const [show, setShow] = createSignal(false);
  const { style } = createTransition(show, {
    transition: {
      in: { opacity: 1, transform: "scaleY(1)" },
      out: { opacity: 0, transform: "scaleY(0)" },
      common: { "transform-origin": "top" },
    },
    duration: 400,
    easing: "ease",
  });
  return (
    <>
      <Button onClick={() => setShow(prev => !prev)}>{show() ? "Hide" : "Show"}</Button>
      <Box p={4} color="white" mt="4" bg="primary.500" rounded="md" shadow="md" style={style()}>
        Animated box.
      </Box>
    </>
  );
}

Unmount on exit

The createTransition primitive exposes a keepMounted accessor which is true until the "exit" transition is done. You can pair it with Show to unmount the component on exit.

tsx
function UnmountOnExitExample() {
  const [show, setShow] = createSignal(false);
  const { style, keepMounted } = createTransition(show, {
    transition: "fade",
    duration: 400,
    easing: "ease",
  });
  return (
    <>
      <Button onClick={() => setShow(prev => !prev)}>{show() ? "Hide" : "Show"}</Button>
      <Show when={keepMounted()}>
        <Box p={4} color="white" mt="4" bg="primary.500" rounded="md" shadow="md" style={style()}>
          Animated box.
        </Box>
      </Show>
    </>
  );
}

tsx
function UnmountOnExitExample() {
  const [show, setShow] = createSignal(false);
  const { style, keepMounted } = createTransition(show, {
    transition: "fade",
    duration: 400,
    easing: "ease",
  });
  return (
    <>
      <Button onClick={() => setShow(prev => !prev)}>{show() ? "Hide" : "Show"}</Button>
      <Show when={keepMounted()}>
        <Box p={4} color="white" mt="4" bg="primary.500" rounded="md" shadow="md" style={style()}>
          Animated box.
        </Box>
      </Show>
    </>
  );
}

Props

Below are the properties available on the TransitionOptions type.

Name	Type	Description	Default value
transition	`HopeTransition`	Predefined transition name or transition styles.	fade
duration	`number`	Transitions duration (in ms).	250
exitDuration	`number`	Exit transition duration (in ms).	250
delay	`number`	Delay before starting transitions (in ms).	10
exitDelay	`number`	Delay before starting the exit transition (in ms).	10
easing	`JSX.CSSProperties["transition-timing-function"]`	Transitions timing function.	ease
exitEasing	`JSX.CSSProperties["transition-timing-function"]`	Exit transition timing function.	ease
onBeforeEnter	`() => void`	A function that will be called when enter transition starts.
onAfterEnter	`() => void`	A function that will be called when enter transition ends.
onBeforeExit	`() => void`	A function that will be called when exit transition starts.
onAfterExit	`() => void`	A function that will be called when exit transition ends.