html:

<transition name="slideFade">
    <div  v-if="isshow" transiton="slideFade"></div>
</transition>

css:

.slideFade-enter {
    animation: slideFade-dialog-fade-in 0.5s ease;
}
  .slideFade-leave {
    animation: slideFade-dialog-fade-out 0.5s ease forwards;
  }
  .slideFade-enter-active {
    animation: slideFade-dialog-fade-in 0.5s ease;
  }
  .slideFade-leave-active {
    animation: slideFade-dialog-fade-out 0.5s ease forwards;
  }
  
  @keyframes slideFade-dialog-fade-in {
    0% {
      transform: translate3d(-100%, 0, 0);//修改这个可以控制，上下左右动画，例如：100%为从右到左
      opacity: 1;
    }
    100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  @keyframes slideFade-dialog-fade-out {
    0% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
    100% {
      transform: translate3d(-100%, 0, 0);
      opacity: 1;
    }
  }