Vue Transition 挤压其他元素问题

错误示例代码: 

<transition name="custom">
 <h1 class="title" v-if="value==1" >标题</h1>
</transition>

<div id="t1">测试文字</div>

以上执行效果会为在动画未执行时t1会在最上方,在动画执行时 t1 会被动画挤压到下方.

 

解决方案:

<div class="box">
 <transition name="custom">
  <h1 class="title" v-if="value==1" >标题</h1>
 </transition>
</div>

<div class="t1">测试文字</div>

在动画外层添加一层 div 并提前使用css 占好位置即可解决问题