子组件转换的 beforeEnter 钩子被 scrollTop 布局计算 Vuejs 取消答案

【问题标题】：beforeEnter hook on child component transition cancelled by scrollTop layout calculations Vuejs子组件转换的 beforeEnter 钩子被 scrollTop 布局计算 Vuejs 取消
【发布时间】：2018-07-03 08:33:21
【问题描述】：

我在 Vuejs 中遇到了一些非常奇怪的事情。

当我在 javascript beforeEnter 钩子中添加一些布局重新计算用于 vuejs 动画时，进入动画将被取消。

在下面的例子中，如果你从 beforeSlideEnter 钩子中移除这部分，动画将正常运行。但是如果你把它加回去，进入的动画就会消失，元素会立即出现。

let scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop
console.log(scrollTop)

请参阅以下示例或 codepen 示例：https://codepen.io/asiankingofwhales/pen/zpQBQM

var Child = {
  template: '<div>A custom component!</div>'
}

new Vue({
  el: '#example-1',
  components: {
    'my-component': Child
  },
  data: {
    show: false
  },
  methods: {
    toggleShow () {
      this.show = !this.show
    },
    beforeSlideEnter (el) {
      let scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop
      console.log(scrollTop)
    }
  }
})

/* Enter and leave animations can use different */
/* durations and timing functions.              */
.post-slide-enter-active, .post-slide-leave-active {
  transition: transform 2s;
}

.post-slide-enter, .post-slide-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(100%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="example-1">
  <button @click="toggleShow">
    Toggle slide
  </button>
  <transition name="post-slide"
              v-on:before-enter='beforeSlideEnter'>
    <my-component v-if="show">hello</my-component>
  </transition>
</div>

我尝试将子组件包装在另一个 div 中并将 v-if 向上移动到该 div 中，从而解决了问题。但是我不知道为什么会这样..

【问题讨论】：

标签： javascript animation vue.js components

【解决方案1】：

这目前还没有解释和opened as a bug。如果将来状态发生变化，将更新。

临时破解：将子组件包装在另一个 div 中。

【讨论】：