Using x-show and x-transition with many things being transitioned

[catgirlinspace]

hi!! I'm trying to use alpine for some modal transitions on my website. They mostly work except for the first time opening they lack transitions. This is what my modals look like (using tailwind css)

<div x-show="modalOpen" class="relative z-50">
	<div
		class="fixed inset-0 bg-gray-500/75 transition-opacity"
		x-show="modalOpen"
		x-transition:enter="ease-out duration-300"
		x-transition:enter-start="opacity-0"
		x-transition:enter-end="opacity-100"
		x-transition:leave="ease-in duration-200"
		x-transition:leave-start="opacity-100"
		x-transition:leave-end="opacity-0"
	></div>

	<div class="fixed inset-0 z-50 overflow-y-auto" @click="modalOpen = false">
		<div class="flex min-h-full items-center justify-center text-center">
			<div
				class="transform transition-all w-full max-w-7xl flex justify-center"
				x-show="modalOpen"
				x-transition:enter="ease-out duration-300"
				x-transition:enter-start="opacity-0 translate-y-4 scale-90"
				x-transition:enter-end="opacity-100 translate-y-0 scale-100"
				x-transition:leave="ease-in duration-200"
				x-transition:leave-start="opacity-100 translate-y-0 scale-100"
				x-transition:leave-end="opacity-0 translate-y-4 scale-90"
			>
				<img @click.stop src="{{ photo.url }}" alt="" class="max-h-[95vh]">
			</div>
		</div>
	</div>
</div>

For context, these modals are for the images here https://splatoon.phoebeivy.dev/album/

I'm not sure how to fix this. I am very new to using alpine.

[catgirlinspace]

looks like this issue was caused by the module i use.