Анимационный диалог с Vue

Question

Я пытаюсь анимировать компонент Dialog для входа / выхода из / к его кнопке активатора. Мой код выглядит так:

/* App.vue */
<div id="app">
  <Modal>
    <template #activator="{toggle}">
      <button @click="toggle">
        OPEN MODAL
      </button>
    </template>
  </Modal>
</div>

/* Modal.vue */
<template>
  <div>
    <slot name="activator" :toggle="toggle"></slot>
    <portal to="modals">
      <transition name="modal" @enter="enter" @leave="leave">
      <div class="modal-wrapper" ref="wrapper" v-if="open">
        <slot>MODAL CONTENT</slot>
      </div>
      </transition>
    </portal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      open: false,
    }
  },
  methods: {
    toggle() {
      this.open = !this.open
    },
    enter(el, done) {
      let origin = document.activeElement
      let { left, top, width, height } = origin.getBoundingClientRect()
      el.style.left = left + width / 2 + 'px'
      el.style.top = top + height / 2 + 'px'
      el.style.transform = ''
      el.style.transition = 'none'

      // Trying to force the browser to apply the changes:
      el.offsetHeight

      // Now reset everything when the entering position is all set:
      el.style = null

      // should I call done()?
    },
  }
}
</script>

<style>
.modal-wrapper {
  background: tomato;
  width: 200px;
  height: 200px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.modal-enter-active,
.modal-leave-active {
  transition: all .3s ease-out;
}
.modal-enter {
  transform: scale(0);
  opacity: 0;
}
.modal-leave-to {
  transform: scale(0);
  opacity: 0;
}
</style>

Сейчас я просто установил модальное значение 200px по сравнению с 200px.

К сожалению, модал не открывается так, как хотелось бы :( - он просто появляется в середине страницы, как будто функция javascript не имеет никакого значения, хотя, если я утешу Записать позицию, которую я устанавливаю, кажется, все в порядке. Любое предложение будет высоко оценено!