NickE Posts - Answer Overflow

NickE

•Created by NickE on 6/14/2024 in #front-end

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;
    }
}

4 replies

Gaming

Programming