0.2.0 • Published 3 years ago
keep-alive-manage v0.2.0
vue-project-keep-alive
一个缓存页面的通用组件
install
npm install keep-alive-manage
use
import KeepAliveManage from "keep-alive-manage"
example
<keep-alive-manage
:max="10"
:className="['routerPage']"
></keep-alive-manage>
//
.routerPage {
width: 100%;
height: 100%;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #f8f8f8;
}
$--transition-time: 1000ms;
.back-enter-active,
.back-leave-active,
.forward-enter-active,
.forward-leave-active {
will-change: transform;
transition: transform $--transition-time;
position: absolute;
height: 100%;
backface-visibility: hidden;
perspective: 1000;
}
.back-enter {
// z-index: 20;
opacity: 0.75;
transform: translate3d(-100%, 0, 0) !important;
}
.back-enter-active {
// z-index: -1 !important;
transition: transform $--transition-time;
}
.back-leave-active {
transform: translate3d(100%, 0, 0) !important;
transition: transform 10000ms;
}
.forward-enter {
// z-index: 2;
transform: translate3d(100%, 0, 0) !important;
}
.forward-enter-active {
transition: transform $--transition-time;
}
.forward-leave-active {
// z-index: -1;
opacity: 0.65;
transform: translate3d(0, 0, 0) !important;
transition: transform 10000ms;
}