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

Posted 2021-03-22 lsc-boke

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;
  }
}

这个为从上往下滑动