我正在尝试使用animate.css和Vue.js转换在两个表单部分之间制作一些滑块动画：
<transition name="custom-classes-transition" enter-active-class="animated slideInLeft" leave-active-class="animated slideOutLeft">
<div v-if="showSignUpFormUserDetails">
<b-form-group description="" class="m-0 p-0">
<b-form-input id="inputEmail" type="text" v-model="SignUpForm.email" required placeholder="Email"></b-form-input>
<label for="inputEmail">Email</label>
</b-form-group>
<b-form-group description="" class="m-0 p-0">
<b-form-input id="inputUsername" type="text" v-model="SignUpForm.username" required placeholder="Username"></b-form-input>
<label for="inputUsername">Username</label>
</b-form-group>
</div>
</transition>
<transition name="custom-classes-transition" enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight">
<div v-if="showSignUpFormPasswordDetails">
<b-form-group description="" class="m-0 p-0">
<b-form-input id="inputPassword1" type="password" v-model="LogInForm.password1" required placeholder="Password"></b-form-input>
<label for="inputPassword1">Password</label>
</b-form-group>
<b-form-group description="" class="m-0 p-0">
<b-form-input id="inputPassword2" type="password" v-model="LogInForm.password2" required placeholder="Repeat Password"></b-form-input>
<label for="inputPassword2">Repeat Password</label>
</b-form-group>
</div>
</transition>
用户将使用按钮触发转换过程中v-if的更改-使用相应的布尔值更新this.showSignUpFormPasswordDetails和this.showSignUpFormUserDetails。
但是，目前 两个部分都在争夺空间 -在第一部分离开之前，第二部分进入，第二部分最终进入低得多的位置在页面上的第一个转换完全离开之前就被剪裁到位...
我尝试将mode="out-in"指令绑定到过渡元素，但是没有真正的运气（我怀疑这是因为我正在使用自定义过渡类。）
我还尝试用v-if代替v-show指令，这也导致第二次转换完全消失。
所以，我的问题是 ... 我们如何获得不争夺空间的过渡？
我想我可以尝试position: absolute，但是那样会使页面的其余样式混乱，尤其是当您开始在各种设备尺寸上查看它时。