Modal Page Transitions not work

[Soya-xy]

Modal Page Transitions leave not work

i use shacdn , transition not work,

login.vue

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'

const { close } = useModalRouter()
</script>

<template>
  <Dialog default-open>
    <DialogContent class="sm:max-w-[425px] DialogContent">
      <DialogHeader>
        <DialogTitle>Edit profile</DialogTitle>
        <DialogDescription>
          Make changes to your profile here. Click save when you're done.
        </DialogDescription>
      </DialogHeader>
      <div class="grid gap-4 py-4">
        <div class="grid grid-cols-4 items-center gap-4">
          123
        </div>
        <div class="grid grid-cols-4 items-center gap-4">
          34535
        </div>
      </div>
      <DialogFooter>
        <Button type="submit" @click="close">
          Save changes
        </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

index.vue

    <Transition name="modal">
      <PlusModalPage name="modal" />
    </Transition>

@keyframes zoomIn {
  from {
    transform: translate(-50%, -50%) scale(0);
  }
  to {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes zoomOut {
  from {
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    transform: translate(-50%, -50%) scale(0);
  }
}


.DialogContent[data-state="open"] {
  animation: zoomIn 300ms ease-out !important;
}

.DialogContent[data-state="closed"] {
  animation: zoomOut 300ms ease-in !important;
}

.model-enter-active {
  animation: zoomIn 300ms ease-out !important;

}

.model-leave-active {
  animation: zoomOut 300ms ease-in !important;
}