Components

Transition

Storybook

The Transition component allows you to apply animated transitions to its child elements. It provides configuration options to control the animation, such as duration, delay, animation type, and more.

Import

1import { Transition } from 'dd360-ds'

1import Transition from 'dd360-ds/Transition'

Animation types:

1import { AnimationsTypes } from 'dd360-ds'

Usage

Within your component's render method, place the Transition component, wrapping the elements you want to animate.

1import { Transition } from 'dd360-ds'
2
3<Transition animationStart='blink' duration={1000}>
4<div className='w-24 h-24 flex items-center justify-center text-white bg-red-500 rounded-lg'>Blink</div>
5</Transition>
6

The Transition component accepts the following props:

show determines whether the transition is visible or hidden. Set it to true to show the transition or false to hide it.

animationStart specifies the starting animation type. It defaults to 'fadeIn'.

animationEnd specifies the ending animation type. It defaults to 'fadeOut'.

duration determines the duration of the animation in milliseconds. The default duration is set to 300 milliseconds.

delay specifies the delay before the animation starts in milliseconds. It defaults to 0 milliseconds.

fillMode determines how the animation styles are applied before and after the animation. It accepts the values 'none', 'forwards', 'backwards', or 'both'. The default value is 'both'.

timingFunction defines the timing function for the animation. It accepts the values 'linear', 'ease', 'ease-in', 'ease-out', or 'ease-in-out'. The default is set to 'linear'.

alwaysRender controls whether the transition should always render its child elements, even when not visible. By default, it is set to false.

Visibility

To control the visibility of the Transition component, you can utilize the show property, which accepts a boolean value. When set to true, the component becomes visible. This can be easily managed by employing the useState hook.

1import { useState } from "react"
2import { Button, Transition } from "dd360-ds"
3
4const TransitionCustom = () => {
5  const [isActive, setIsActive] = useState<boolean>(false)
6
7  return (
8    <>
9      <Button onClick={() => setIsActive(!isActive)}>Toggle animation</Button>
10      <Transition show={isActive}>
11        <div className="w-24 h-24 flex items-center text-center text-white bg-red-500 rounded-lg">
12          Fade animation
13        </div>
14      </Transition>
15    </>
16  )
17}

Duration & delay

You can also customize the animation duration and delay using the duration and delay properties.

The duration property determines how long the transition animation takes to complete, and it accepts a value in milliseconds. For example, setting duration=500 would make the animation last for 500 milliseconds.

On the other hand, the delay property allows you to specify a delay before the transition animation begins. It also accepts a value in milliseconds. If you set delay=200, the transition animation will start after a 200 millisecond delay.

By adjusting the values of duration and delay and combining them with the show property controlled by useState, you can create more dynamic and customized transition effects for your Transition component.

1import { useState } from "react"
2import { Button, Transition } from "dd360-ds"
3
4const DurationDelayExample = () => {
5  const [isActive, setIsActive] = useState<boolean>(false)
6  
7  return (
8    <>
9      <Button onClick={() => setIsActive(!isActive)}>Toggle animation</Button>
10      <Transition show={isActive} duration={500} delay={100}>
11        <div className="w-24 h-24 flex items-center text-center text-white bg-red-500 rounded-lg">
12          Duration & delay
13        </div>
14      </Transition>
15    </>
16  )
17}

Animations

By utilizing the animationStart and animationEnd properties with appropriate animation names, you can apply custom animations to enhance the visual effects during the transition process of the Transition component.

1import { useState } from "react"
2import { Button, Transition } from "dd360-ds"
3
4const ControlAnimationExample = () => {
5  const [isActive, setIsActive] = useState<boolean>(false)
6
7  return (
8    <>
9      <Button onClick={() => setIsActive(!isActive)}>Toggle animation</Button>
10      <Transition
11        show={isActive}
12        animationStart="fadeInRight"
13        animationEnd="flipOutY"
14      >
15        <div className="w-24 h-24 flex items-center text-center text-white bg-red-500 rounded-lg">
16          Hey!
17        </div>
18      </Transition>
19    </>
20  )
21}

All animations

API Reference