Vue Transition Collapsing Snap

Question

我很好奇其他人是如何解决这个问题的。当我转换其布局影响页面的元素时，删除转换元素时会进行快照或布局调整。这是有道理的，但我不确定如何最好地接近它。这是一个例子： https://codepen.io/noynek/pen/yXeRBY

HTML

<div id="demo">
  <transition name="fade">
    <div v-if="show" style="float:left">
      <input placeholder="field 1" />
      <input placeholder="field 2" />
    </div>
  </transition>
  <button v-on:click="show = !show">Toggle</button>
</div>

JS

new Vue({
  el: '#demo',
  data: {
  show: true
 }
})

CSS

.fade-enter-active, .fade-leave-active {
  transition: all 1s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
  transform: translateX(-100px);
}