Fade component of dash bootstrap components not fading?

Dash Python
, ,
1

Hey all,

When I run the app, while the example text appears and disappears as it should, it doesn’t fade like it does in the examples on the documentation. Both my dash and dash-bootstrap-components are up to date (2.9.3 and 1.4.1 respectively)

So I’ve basically copy and pasted the code below directly from the Fade dash bootstrap components documentation here The only things I’ve added are the app, app.layout, and app.run lines.

I’m using Linux ubuntu, is there something I’m missing here? Does the Fade component just not work anymore?

import dash_bootstrap_components as dbc
from dash import Input, Output, State, html,dcc,Dash

app = Dash(__name__)

fade = html.Div(
    [
        dbc.Button(
            "Toggle fade",
            id="fade-transition-button",
            n_clicks = 0,
        ),
        dbc.Fade(
            dbc.Card(
                dbc.CardBody(
                    html.P(
                        "This content fades in and out", className="card-text"
                    )
                )
            ),
            id="fade-transition",
            is_in=True,
            style={"transition": "opacity 2000ms ease"},
            timeout=2000,
        ),
    ]
)

app.layout = fade

@app.callback(
    Output("fade-transition", "is_in"),
    [Input("fade-transition-button", "n_clicks")],
    [State("fade-transition", "is_in")],
)
def toggle_fade(n, is_in):
    if not n:
        # Button has never been clicked
        return True
    return not is_in

if __name__ == "__main__":
    app.run_server(debug=True, port = 8051)
2

I think you should add external_stylesheet to you app like app = Dash(__name__,external_stylesheets=[dbc.themes.LUX])

2 Likes