如何修复“ fadeInLeft动画不流畅”？

Question

我在下拉菜单项上使用了“ fadeInLeft”动画。但是，当我将持续时间设置为小于1000的数字时，它就不再是平滑的动画，而是在结尾处向右跳。

我尝试使用，但这不会改变任何事情。我也尝试过更改某些样式，但是问题一直在发生。

<!--Template-->
<transition-group
:duration="500"
name="fadeIn"
enter-active-class="fadeInLeft"
leave-active-class="fadeOutLeft"
>
 <div key="test" v-show="show" class="navItem dropdowmItem">
  <div key="test" class="activeBox"></div>
  Dropdown 1
 </div>
</transition-group>


<script>
export default {
 data() {
  return{
   rotate: false,
   show: false
  }
 }
}
</script>

这个想法是为了使过渡平滑，但是现在它只是希望跳过动画的一部分。

当我将持续时间设置为1000时，它很平滑，但是动画会变慢。

谢谢您的好意！