码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-12-18 14:47:40      阅读:620      评论:0      收藏:0      [点我收藏+]

标签:aci   his   mat   div   close   form   translate   过渡   its   

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

这个为从上往下滑动

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

标签:aci   his   mat   div   close   form   translate   过渡   its   

原文地址:https://www.cnblogs.com/lsc-boke/p/12059401.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!