vue笔记，在使用transition上下过渡动画的时候遇到的坑。

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

//我没给div加样式，你就自己加吧

这里放的组件


    
这里放的组件
    

    
这里放的组件
    

//这是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;
    }

这样问题就解决了。