因为工作需求，需要给一个组件实现一上下过渡的动画效果。
我用了transition的来写

//我没给div加样式，你就自己加吧
<transition name="fade">
<div>这里放的组件</div>
</transition>
<transition name="fade">
    <div>这里放的组件</div>
    </transition>
<transition name="fade">
    <div>这里放的组件</div>
    </transition>

//这是css样式
.fade-leave-to{
  opacity:0;
  transform: translate3d(0,300px,0);
    }
.fade-enter{
    transform: translate3d(0,-300px,0);
    }
.fade-leave-active,.fade-enter-active{
  transition: .5s all ease;
    }

这样的话发现了一个大坑，他会左右偏移，效果直接炸了，然后查了下资料
发现了一个解决方法，就是加上position：absolute；
然后发现效果好了很多，但是还是不完美，每次离开都带有右偏
然后发现问题所在，因为加上定位之后，每次进去和离开的两个组件层级一样，导致离开那个组件被挤到右边
你只需要给离开的组件加上一个z-index：-10 只要小于0就可以

.fade-leave-to{
  opacity:0;
  transform: translate3d(0,300px,0);
   position: absolute; 
   z-index: -10;
    }
.fade-enter{
    transform: translate3d(0,-300px,0);
    position: absolute;
    }
.fade-leave-active,.fade-enter-active{
  transition: .5s all ease;
    }

这样问题就解决了。