[Vuejs]-Vuejs transition is not working to show a modal

by

3👍

✅

It’s because you have v-if="loading" on .modal-overlay. This doesn’t give it a chance to evaluate the condition and transition the element.

Remove that and it should work:

Vue.createApp({
  data() {
    return {
      loading: false
    }
  },
  created() {
    setInterval(() => {
      this.loading = !this.loading
    }, 2000)
  }
}).mount('#app')
.dialog {
  text-align: center;
  border-radius: 10px;
  width: 10%;
  min-width: fit-content;
  border: 2px solid #00f6f6;
  background-color: #0f0f0f;
  color: #efefef;
  padding: 10px;
  /* animation: enter 0.25s linear; */
  overflow: hidden;
}

.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

.loading-enter-active {
  animation: enter 0.2s ease-out;
}

.loading-leave-active {
  animation: enter 0.2s ease-in reverse;
}

@keyframes enter {
  0% {
    opacity: 0%;
    transform: scale(0);
  }
  100% {
    opacity: 100%;
    transform: scale(1);
  }
}
<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <teleport to="body">
    <div class="modal-overlay">
      <transition name="loading">
        <div class="dialog" v-if="loading">
          <h1>LOADING</h1>
        </div>
      </transition>
    </div>
  </teleport>
</div>
👤Daniel_Knights

0👍

Well, I was facing similar problem when i was using Modal. From your question, i understood that you have problem with the transition, that is because of the <style scoped>.

You can go through this link https://cli.vuejs.org/guide/css.html#referencing-assets for better understanding how the CSS works in Vue/cli projects.

I am not sure why you have used <div v-if="loading" class="dialog">, first remove the v-if and then try adding a class to CSS <style lang="scss" scoped>.

If this is working fine for you, then you can add v-if or anything according to your requirements.

Thank you, I hope this will help you.

👤Quantum

Leave a comment