✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Animate html.details

Hello,

I created a side panel using Dash. I am trying to add a transition to html.details. I just figured out how to do it in the CSS stylesheet. However the element inside appear before the animation is complete. Does anyone know how to implement this? Should it be done using a dash callback or in the stylesheet?

Here is my CSS code for the animation:

.pane-buttons {
margin-top: 5px;
margin-bottom: 5px;
/*border: 1px solid #CFD8DC;*/
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
transition: height 1s ease;

}

.pane-buttons:not([open]) { height: 2em }
.pane-buttons[open] { height: 6em }

Thanks,
Vivek

Still haven’t managed to find a solution. Any ideas?

Thanks,
Vivek

Have you tried put in a delay on the text part? Let it delay N seconds where N is the time it takes for your animation to complete.
https://www.w3schools.com/cssref/css3_pr_animation-delay.asp

Thanks for the input @Blaceus - but that doesn’t seem to work on the dash components :frowning: