标签: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