TransitionWrapper

The TransitionWrapper component provides smooth animations when showing or hiding elements. It's particularly useful for creating engaging user interfaces with animated transitions.

Interactive Example

Below is an interactive example showing different types of transitions:

Python Dash Example

Below is an example of how to use the TransitionWrapper component in a Python Dash application.

import dash
from dash import Dash, html, Input, Output
import yipit_dash_mui_components as dmc

# Initialize the Dash app
app = Dash(__name__)

dash._dash_renderer._set_react_version('18.2.0')

# Layout of the Dash app
app.layout = dmc.YipitMUIProvider(
    children=[
        dmc.Box([
            # Button to toggle visibility
            dmc.Button("Toggle Box", id="toggle-btn", n_clicks=0, sx={"margin-bottom": "20px"}),

    # TransitionWrapper to display animated content
    dmc.TransitionWrapper(
        id="animated-content",
        children=dmc.Box(
            "This is a box!",
            id="box",
            sx={
                "width": "200px",
                "height": "100px",
                "backgroundColor": "secondary.light",
                "color": "secondary.contrastText",
                "textAlign": "center",
                "lineHeight": "100px"
            }
        ),
        transition="grow",
        inProp=False,
            )
        ])
    ]
)

# Callback to toggle the visibility of the box
@app.callback(
    Output("animated-content", "inProp"),
    Input("toggle-btn", "n_clicks")
)
def toggle_visibility(n_clicks):
    # Toggle visibility based on button clicks
    return n_clicks % 2 == 1

if __name__ == "__main__":
    app.run_server(debug=True)

Available Transitions

The TransitionWrapper supports several transition types:

• fade: Fades the element in and out
• grow: Scales the element from/to its center
• collapse: Collapses the element vertically
• slide: Slides the element in/out from a specified direction
• zoom: Zooms the element in/out

Props Table

Below are the props available for the TransitionWrapper component:

Prop	Type	Default	Description
id	string	None	Unique identifier for the transition wrapper.
children	React.ReactNode	None	The content to be animated.
transition	string	'fade'	Type of transition animation ('fade', 'grow', 'collapse', 'slide', 'zoom').
inProp	boolean	false	Controls whether the children are visible or hidden.
timeout	number	300	Duration of the transition in milliseconds.
direction	string	'down'	Direction of the transition (for slide transition: 'up', 'down', 'left', 'right').

For more information about transitions in Material-UI:

MUI Transitions Documentation