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

Question

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

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

这些我都试过了:

• 先移动 div，然后在 nextTick 上设置 active = true。
• 使用 javascript 钩子(Hook) beforeEnter 尝试在转换开始之前移动 div。
• 使用 javascript 钩子(Hook)输入(和“完成”回调)尝试在转换开始之前移动 div。
• 在设置 active = true 之前尝试了以上所有操作，并立即使用新位置更新 DOM。 (换句话说，不是通过数据绑定(bind)，而是像 this.$refs.content.style.top = '500px' 这样直接设置元素样式属性，以避免在虚拟 DOM 上等待。)但是，理想情况下，我想在不直接接触 DOM 的情况下完成此操作，而是使用 nextTicks。这两种方法都失败了。
• 尝试了一些成功的 hacky 过渡:所有 0.8 毫秒缓入，顶部 1 毫秒，左侧 1 毫秒。
• 尝试先移动 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>