Vue slide animation doesn't animate container

Question

I always struggle to grasp how simple concepts as slide down and up can be so problematic with nowadays powerful webdev tools.

I have the following Vue transition:

<transition
:duration="1000"
enter-active-class="transform transition duration-300 ease-custom"
enter-from-class="-translate-y-1/2 scale-y-0 opacity-0"
enter-to-class="translate-y-0 scale-y-100 opacity-100"
leave-active-class="transform transition duration-300 ease-custom"
leave-from-class="translate-y-0 scale-y-100 opacity-100"
leave-to-class="-translate-y-1/2 scale-y-0 opacity-0"
>

This is a part of a scrollable landing page. Inside this transition I have a block of that page with full width:

<div class='bg-red-500' v-show='anyActive'>
    <div class='max-w-7xl h-full mx-auto py-5 text-gray-100 font-titles px-5 relative'>
        Example content
    </div>
</div>

The transition works however, the content that is supposed to be beneath this animated div doesn't slide with it and instead just jumps to where it's supposed to be before and then after the animation finishes.