vue transition component doesn't work correctly

Question

hello this is a simple code but i don't know what is problem. when i click on open modal on parent component modal get open but without transition i just write it from a tutorial and in tutorial it work correctlry

<template>
  <div class="backdrop" @click="$emit('close')" v-if="open"></div>
  <transition name="modal" mode="out-in">
    <dialog open v-if="open">
      <slot></slot>
    </dialog>
  </transition>


</template>

<script>
export default {
  emits: ['close'],
  props:['open']
};
</script>

<style scoped>



.modal-enter-active{
  animation: modal 2s linear;
}
.modal-leave-active{
  animation: modal 2s linear;
}

@keyframes modal {
  from{
    opacity: 0;
    transform:translateY(-150px) scale(0)
  }

  to{
    opacity: 1;
    transform:translateY(0) scale(1)
  }

}
</style>

i am using vue 3

It works for me without the dialog component maybe that's the problem? https://codesandbox.io/s/brave-volhard-8fntf?file=/src/components/Modal.vue — Larizza Tueros, Mar 19 '21 at 18:33
Check your console.log is there any error? try to display other component instead of the dialog it works? If so probably the problem is in the dialog, you can make a sandbox with the case — Larizza Tueros, Mar 19 '21 at 22:58

score 0 · Answer 1 · answered Mar 20 '21 at 06:16

Do you actually need to use CSS animations?

How about using simple transitions?

.modal-enter-active, .modal-leave-active {
  transition: 2s;
  transition-timing-function: linear;
}
.modal-enter, .modal-leave-to {
  opacity: 0;
  transform:translateY(-150px) scale(0);
}

vue transition component doesn't work correctly

1 Answers1

Linked