Vue.js转换时出现意外行为

Question

我正在进行＆＃34;幻灯片切换＆＃34;转换以获得类似于jQuery＆＃39; .slideToggle()方法的功能。我有它工作，但需要一条线来使它工作，我不知道为什么。当我从var neededForSomeReason = el.offsetHeight;和enter()函数中删除leave()时，没有动画，div只是快照打开和关闭。

为什么过渡工作需要这条线？有没有办法让转换工作没有呢？

＆＃13;

＆＃13;

new Vue({
  el: '#app',
  data: {
    height: 0,
    open: false,
  },
  methods: {
    toggle() {
      this.open = !this.open;
    },
    beforeEnter: function(el) {
      el.style.height = 'auto';
      el.style.display = 'block';
      this.height = el.offsetHeight;
      el.style.height = '0px';
    },
    enter: function(el) {
      // If this line is removed the transition doesn't work.
      var removeToBreak = el.offsetHeight;
      el.style.height = this.height + 'px';
    },
    afterEnter: function(el) {
      el.style.height = 'auto';
    },
    beforeLeave: function(el) {
      el.style.height = el.offsetHeight + 'px';
    },
    leave: function(el) {
      // If this line is removed the transition doesn't work.
      var removeToBreak = el.offsetHeight;
      el.style.height = '0px';
    },
  },
})

＆＃13;

.transition-height {
  transition: height 250ms;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/0.5.3/tailwind.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app" class="p-4 bg-grey-light min-h-screen">
  <div class="bg-white rounded-sm shadow overflow-hidden">
    <div @click.prevent="toggle" class="px-8 py-4 bg-blue text-white">
      Click to Toggle
    </div>
    <transition 
      v-on:before-enter="beforeEnter" 
      v-on:enter="enter" 
      v-on:after-enter="afterEnter" 
      v-on:before-leave="beforeLeave" 
      v-on:leave="leave"
    >
      <div v-show="open" class="transition-height">
        <div class="p-8 leading-normal text-grey-darker">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis orci vitae turpis laoreet mattis. Morbi quis viverra orci. Sed vitae tincidunt nisl. Phasellus lobortis nisi mauris, non semper neque maximus at. Integer neque enim, tristique a dui sed, ultrices eleifend dolor. Mauris non tristique leo. Ut erat quam, feugiat eget venenatis eu, euismod et tortor.
        </div>
      </div>
    </transition>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;