Transitions for custom popups with absolute elements

[Nikola-Milovic]

Hello everyone, I have a transition added to my custom popup. And when the popup is leaving ( dismissed ) all of the absolute positioned elements become visible instantly, which can be seen here

Written in kotlin, should be readable

  transition { // the Transition component
        attrs.unmount = true
        attrs.show = props.popup
        attrs.enter = "transition-all duration-700 delay-700"
        attrs.enterFrom = "opacity-0"
        attrs.enterTo = "opacity-100"
        attrs.leave = "transition-opacity duration-500 delay-200"
        attrs.leaveFrom = "opacity-100"
        attrs.leaveTo = "opacity-0"

        div("absolute top-0 left-0 h-screen w-screen bg-gray-800 bg-opacity-50 z-50") { //background
            attrs.onClick = {
                props.dismiss()
            }
            
            // the white part with the content
            div("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-3/4 h-3/4 md:w-1/2 bg-white z-50") { 
                attrs.onClick = {
                    it.stopPropagation()
                }

       }
    }
}

The issue comes from the absolute top app bar, which instantly becomes visible when transition starts fading

     div("absolute top-0 h-16 w-full bg-primary-base flex z-10 flex-row items-center p-2 z-5") {
                attrs {
                    id = "topbar"
                }

Any way around this?