Kevin Powell - Community•7mo ago

REACT component in need of dynamic div height for animation

Hello! I am having an issue animating a conditionally rendered component in my Next.js project. I am trying to animate the height of a <div> to zero. If I don't have a set height and want it to be dynamic based on the content in the <div>, is there a unit that would work for this? Here is a link to a Gist for better reference: https://gist.github.com/egnica/e871db3612b00e228b00995d4f57a029 (actual project imports a page.module.css for css) Right now the animation is ridged without specific height defined in the height: I've been stuck on this for some time, so any help would be greatly appreciated!!

@keyframes fade-out {
    from {
        opacity: 1;
        height: 100vm;
    }
    50% {
        opacity: 0.5;
        height: 50vm;
    }
    to {
        opacity: 0;
        height: 0vm;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
        height: 100vm;
    }
    50% {
        opacity: 0.5;
        height: 50vm;
    }
    to {
        opacity: 0;
        height: 0vm;
    }
}

Gist

Fade Component

Fade Component . GitHub Gist: instantly share code, notes, and snippets.

3 Replies

clevermissfox•7mo ago

https://youtu.be/B_n4YONte5A?si=1KREaRS_b9Yvqp53

Kevin Powell

YouTube

The simple trick to transition from height 0 to auto with CSS

Animating or transitioning to and from height auto is, well, not really possible (though it is being worked on!), but luckily, there is actually a solution using CSS Grid that’s really easy to implement! 🔗 Links ✅ Keith J. Grant’s article on this (also includes a flexbox solution): https://keithjgrant.com/posts/2023/04/transitioning-to-height-...

NickEOP•7mo ago

Thanks for that clip @clevermissfox! I was able to make my component trasition much more smooth! Great tip

clevermissfox•7mo ago

Once it’s fully supported we will be able use calc-size (auto) and animate to and from display: none with discrete animations too! https://youtu.be/1VsMKz4Zweg?si=eTEFN6D9FKfi7pUk

CSS Weekly

YouTube

Transition to "height: auto;" & "display: none;" Using Pure CSS

Find out how to easily transition from “height: 0;” to “height: auto;” and “display: none;” to “display: block;” without any hacks, tricks, or JavaScript, using only new CSS features: calc-size() function, transition-behavior property and @starting-style at-rule. 🔗 Links Demo: https://codepen.io/ZoranJambor/pen/GRaNZNV??editors=1000&layout=left...

Gaming

Programming

REACT component in need of dynamic div height for animation