如何在 Vue 转换开始之前读取大小并移动隐藏元素？

Question

如何在 Vue 过渡开始之前读取尺寸并移动隐藏的 div？例如，用户单击一个按钮，我想移动一个隐藏的 div 以显示在按钮下方并带有淡入过渡。在过渡开始之前，我需要能够读取尺寸并移动隐藏 div 的顶部/左侧位置。

假设我在 div 上使用 v-show="active"，其中 active 是我想要设置为 true 并能够在转换开始之前移动 div 的反应数据属性。

这些我都试过了：

• 先移动 div，然后在 nextTick 上设置 active = true。
• 使用 javascript 挂钩 beforeEnter 尝试在转换开始之前移动 div。
• 使用 javascript 钩子 enter（和“完成”回调）尝试在转换开始之前移动 div。
• 在设置 active = true 之前，尝试使用新位置立即更新 DOM。 （换句话说，不是通过数据绑定，而是直接设置元素样式属性，如this.$refs.content.style.top = '500px' 以避免在虚拟 DOM 上的任何等待。）但是，理想情况下，我希望在不直接接触 DOM 的情况下完成此操作，而是使用 nextTicks 代替.两种方法都失败了。
• 尝试使用 hacky transition: all .8ms ease-in, top 1ms, left 1ms 取得了一些成功。
• 尝试先移动 div，然后在 setTimeout 中设置为活动状态。不过，这不是正确的解决方案。

更新
感谢接受的答案，我能够看到我可以在 nextTick 上读取尺寸（此时 v-show 已打开显示）。然而，事实证明我需要将过渡全部设为transition all .3s，这将导致包含移动。 DOM 将收集所有更改并将它们一起应用，这意味着它们被集中到稍后由 Vue 添加的转换中。最终的解决方案是我需要做出动作，然后先触发 DOM 重新绘制，然后触发 v-show 打开。这是一个示例方法：

startTransition () {
  this.$refs.content.offsetHeight // <-- Force DOM to repaint first.
  this.isContentActive = true     // <-- Turns on v-show.
},

Answer 1

使用v-bind:style 移动您的窗口，一切都会按预期进行。

更新：要检查弹出窗口本身的大小，必须显示它，所以我使用v-show 而不是v-if。我做的第一件事就是让它可见；在下一个刻度上，我可以测量它并放置它。

new Vue({
  el: '.container',
  data: {
    top: 0,
    left: 0,
    width: 0,
    show: false
  },
  methods: {
    showFloater: function(evt) {
      const t = evt.target;

      this.show = true;
      Vue.nextTick(() => {
        const fEl = this.$el.querySelector('.floating');

        this.top = t.offsetTop + 30;
        this.left = t.offsetLeft;
        this.width = fEl.offsetWidth;
        setTimeout(() => this.show = false, 1000);
      });
    }
  }
});

.container {
  position: relative;
}

.floating {
  border: thin solid black;
  padding: 3em;
  position: absolute;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<div class="container">
  <button @click="showFloater">Could go here</button>
  <button @click="showFloater">Or here</button>
  <transition name="fade">
    <div v-show="show" class="floating" v-bind:style="{
      top: top + 'px',
      left: left + 'px'
    }">
      This window is {{width}}px wide.
    </div>
  </transition>
</div>