Question

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

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

在下面的示例中，如果从beforeSlideEnter挂钩中删除此部件，则动画将正常运行。但是，如果将其添加回来，则输入的动画将消失，元素将立即显示。

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

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

＆＃13;

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)
    }
  }
})

＆＃13;

/* 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%);
}

＆＃13;

<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>

＆＃13;

我尝试将子组件包装在另一个div中并将v-if移动到该div中，这解决了问题。但是，我无法弄清楚为什么会发生这种情况。

Answer 1

目前仍未解释此问题opened as a bug。如果将来状态发生变化，将会更新。

临时黑客攻击：将子组件包装在另一个div中。

之前由scrollTop布局计算Vuejs取消的子组件转换上的挂钩

1 个答案: