Animate html.details

Dash Python
1

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

rec
rec.gif502×591 79.1 KB

2

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

Thanks,
Vivek

3

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

4

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