title: beforeEnter hook on child component transition cancelled by scrollTop layout calculations Vuejs
body: <p>I have ran into something really strange in Vuejs. </p>
  
  <p>When I add some layout recalculations in javascript beforeEnter hooks for vuejs animation, the entering animation will be cancelled.</p>
  
  <p>In the following example, if you remove this part from the beforeSlideEnter hook, the animation will run normally. However if you add it back, the entering animation will be gone and the element will appear immediately.</p>
  
  <pre><code>let scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop
  console.log(scrollTop)
  </code></pre>
  
  <p>Pls see follow example or codepen example:<a href="https://codepen.io/asiankingofwhales/pen/zpQBQM" rel="nofollow noreferrer">https://codepen.io/asiankingofwhales/pen/zpQBQM</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Child = {
    template: '&lt;div&gt;A custom component!&lt;/div&gt;'
  }
  
  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)
      }
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* 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%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"&gt;&lt;/script&gt;
  &lt;div id="example-1"&gt;
    &lt;button @click="toggleShow"&gt;
      Toggle slide
    &lt;/button&gt;
    &lt;transition name="post-slide"
                v-on:before-enter='beforeSlideEnter'&gt;
      &lt;my-component v-if="show"&gt;hello&lt;/my-component&gt;
    &lt;/transition&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried wrapping the child components in another div and moved the v-if up into that div, which solved the problem. However I can't figure out why this is happening..</p>