[Vuejs]-Animate child elements with Vue Transitions

by

0👍

If I understood You correctly You can revert animation:

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const open = ref(false);
    return {
      open
    };
  },
})
app.mount('#demo')
.fade-modal-enter-active,
.fade-modal-leave-active {
  transition: opacity 0.5s ease;
}

.fade-modal-enter-from,
.fade-modal-leave-to  {
    opacity: 0;
}
.fade-modal-leave-to  {
    animation: blowDownModal .5s;
}

.modal-open-class {
  animation: blowUpModal .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

@keyframes blowUpModal {
  0% {
    transform:scale(0);
  }
  100% {
    transform:scale(1);
  }
}
@keyframes blowDownModal {
  0% {
    transform:scale(1);
  }
  100% {
    transform:scale(0);
  }
}
<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.prod.js"></script>
<div id="demo">
  <button @click="open = !open">toggle</button>
  <Transition name="fade-modal">
    <div v-if="open" class="overlay-classes-here" style="z-index: 99999">
        <div id="modalIndicator" :class="{'modal-open-class': open }"
            class="modal-classes-here">
            <slot name="modalContent"><h1>some content</h1></slot>
        </div>
    </div>
  </Transition>
</div>

Leave a comment