vue组件弹框过渡效果，如，点击显示为从左到右滑动，收回隐藏为从右到左滑动

vue组件

<transition name="carHistory">
      <car-History-Line v-show="showHistoryLine" @closeHitsory='closeHitsory'></car-History-Line>
    </transition>

css

.carHistory-enter {
  animation: carHistory-dialog-fade-in 0.3s ease;
}
.carHistory-leave {
  animation: carHistory-dialog-fade-out 0.3s ease forwards;
}
.carHistory-enter-active {
  animation: carHistory-dialog-fade-in 0.3s ease;
}
.carHistory-leave-active {
  animation: carHistory-dialog-fade-out 0.3s ease forwards;
}

@keyframes carHistory-dialog-fade-in {
  0% {
    transform: translate3d(-100%, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes carHistory-dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(-100%, 0, 0);
    opacity: 1;
  }
}

这个是从左往右滑动

.fullscreen-enter {
  animation: fullscreen-dialog-fade-in 0.3s ease;
}
.fullscreen-leave {
  animation: fullscreen-dialog-fade-out 0.3s ease forwards;
}
.fullscreen-enter-active {
  animation: fullscreen-dialog-fade-in 0.3s ease;
}
.fullscreen-leave-active {
  animation: fullscreen-dialog-fade-out 0.3s ease forwards;
}

@keyframes fullscreen-dialog-fade-in {
  0% {
    transform: translate3d(0, -100%, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes fullscreen-dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -100%, 0);
    opacity: 1;
  }
}

这个为从上往下滑动

用css3过渡做从左向右进入，从右向左边离开

.right-enter,
.right-leave-to {
  transform: translateX(-130px);
  opacity: 0;
}

.right-leave-active,
.right-enter-active {
  transition: all 0.3s linear;
}

换成 css3动画做就是

.right-enter-active {
  animation: rightOut 0.5s ease;
}
.right-leave-active {
  animation: rightLevel 0.5s ease;
}
@keyframes rightOut {
  0% {
    transform: translateX(-150px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes rightLevel {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-150px);
    opacity: 0;
  }
}