Develop ultra fast with Prismane 🎉
Logo
Quick Search...

Transition

Versatile Component
Transition display a container that can transition it's CSS properties.
Category: Miscellaneous Source

Import

 
import { Transition } from "@prismane/core";

Usage

By default, Transition transitions all CSS properties.

function Demo() {
  const [toggled, setToggled] = useState(false);

  return (
    <Flex direction="column" gap={fr(5)}>
      <Button onClick={() => setToggled(!toggled)}>Toggle Properties</Button>
      <Transition
        w={fr(30)}
        h={fr(30)}
        br={toggled ? "base" : "lg"}
        bg={toggled ? "base" : "primary"}
      />
    </Flex>
  );
}

Transition Delay

The delay of the Transition can be set, by providing a different value to the delay property. By default, the delay value is 0.

function Demo() {
  const [toggled, setToggled] = useState(false);

  return (
    <Flex direction="column" gap={fr(5)}>
      <Button onClick={() => setToggled(!toggled)}>Toggle Properties</Button>
      <Transition
        delay={250}
        w={fr(30)}
        h={fr(30)}
        br={toggled ? "base" : "lg"}
        bg={toggled ? "base" : "primary"}
      />
    </Flex>
  );
}

Transition Duration

The duration of the Transition can be changed, by providing a different value to the duration property. By default, the duration value is 150.

function Demo() {
  const [toggled, setToggled] = useState(false);

  return (
    <Flex direction="column" gap={fr(5)}>
      <Button onClick={() => setToggled(!toggled)}>Toggle Properties</Button>
      <Transition
        duration={1000}
        w={fr(30)}
        h={fr(30)}
        br={toggled ? "base" : "lg"}
        bg={toggled ? "base" : "primary"}
      />
    </Flex>
  );
}

Transition Timing

The timing of the Transition can be changed, by providing a different value to the timing property. By default, the timing value is ease-in-out.

function Demo() {
  const [toggled, setToggled] = useState(false);

  return (
    <Flex direction="column" gap={fr(5)}>
      <Button onClick={() => setToggled(!toggled)}>Toggle Properties</Button>
      <Transition
        timing="ease-in"
        w={fr(30)}
        h={fr(30)}
        br={toggled ? "base" : "lg"}
        bg={toggled ? "base" : "primary"}
      />
    </Flex>
  );
}

Transition Properties

Transition has the following properties:

  • - all - all,
  • - colors - color, background-color, border-color, text-decoration-color, fill, stroke,
  • - opacity - opacity,
  • - shadow - box-shadow, filter,
  • - transform - transform,
function Demo() {
  const [toggled, setToggled] = useState(false);

  return (
    <Flex gap={fr(5)}>
      <Flex direction="column" gap={fr(5)}>
        <Button onClick={() => setToggled(!toggled)}>Toggle Properties</Button>
        <Flex gap={fr(5)}>
          <Transition
            transition="all"
            duration={1000}
            w={fr(30)}
            h={fr(30)}
            br={toggled ? "base" : "lg"}
            bg={toggled ? "base" : "primary"}
            op={toggled ? 0.5 : 1}
            bsh={toggled ? "sm" : "lg"}
          />
          <Transition
            transition="colors"
            duration={1000}
            w={fr(30)}
            h={fr(30)}
            br={toggled ? "base" : "lg"}
            bg={toggled ? "base" : "primary"}
            op={toggled ? 0.5 : 1}
            bsh={toggled ? "sm" : "lg"}
          />
          <Transition
            transition="opacity"
            duration={1000}
            w={fr(30)}
            h={fr(30)}
            br={toggled ? "base" : "lg"}
            bg={toggled ? "base" : "primary"}
            op={toggled ? 0.5 : 1}
            bsh={toggled ? "sm" : "lg"}
          />
          <Transition
            transition="shadow"
            duration={1000}
            w={fr(30)}
            h={fr(30)}
            br={toggled ? "base" : "lg"}
            bg={toggled ? "base" : "primary"}
            op={toggled ? 0.5 : 1}
            bsh={toggled ? "sm" : "lg"}
          />
          <Transition
            transition="transform"
            duration={1000}
            w={fr(30)}
            h={fr(30)}
            br={toggled ? "base" : "lg"}
            bg={toggled ? "base" : "primary"}
            op={toggled ? 0.5 : 1}
            bsh={toggled ? "sm" : "lg"}
          />
        </Flex>
      </Flex>
    </Flex>
  );
}

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

Go BackTooltip