I want to animate modal in Vue 3 but v-if is set on teleport

Question

I have component-wrapper for modals. You can see it below. As you can see, there is no v-if. I set it on exported component. You can see it on another code block. ModalWrapper.vue

<template>
  <teleport to="#modals">
    <transition name="modal" appear>
      <div class="modal-wrapper" @click="handleClickOutside">
        <slot />
      </div>
    </transition>
  </teleport>
</template>

<style lang="scss">
.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  background: #2c3e50a2;
  padding: 1rem;
  backdrop-filter: blur(3px);
  .modal {
    padding: 1rem;
    margin: auto;
    color: var(--text-color);
    background-color: var(--second-color);
  }
}
.modal-enter-active,
.modal-leave-active {
  transition: all 0.25s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
  transform: scale(1.1);
}
</style>

NewModal.vue

<template>
  <ModalWrapper :closeFunc="closeModal">
    <div class="modal">content...</div>  
  </ModalWrapper>
</template>

Home.vue

<template>
  <NewModal v-if="isNewModalOpened" />
</template>

It animates when modal appears but not when it disappears. I can't path variable into the component because there is a slot for modal content. Every custom modal have own variable in vuex store that indicates if exact modal is shown.

I added appear on transition. It added the transition on appear but not when it disappear. I want that animation works both ways.