zmp-core
Version:
Full featured mobile HTML framework for building iOS & Android apps
80 lines (79 loc) • 1.54 kB
text/less
// zmp-dive
.router-transition-zmp-dive-forward,
.router-transition-zmp-dive-backward {
background: var(--zmp-page-bg-color);
perspective: 1200px;
.page-next,
.page-current,
.page-previous:not(.stacked) {
pointer-events: none;
}
}
.router-transition-zmp-dive-forward {
.page-next {
animation: zmp-dive-next-to-current var(--zmp-page-dive-transition-duration) forwards;
}
.page-current {
animation: zmp-dive-current-to-prev var(--zmp-page-dive-transition-duration) forwards;
}
}
.router-transition-zmp-dive-backward {
.page-current {
animation: zmp-dive-current-to-next var(--zmp-page-dive-transition-duration) forwards;
}
.page-previous {
animation: zmp-dive-prev-to-current var(--zmp-page-dive-transition-duration) forwards;
}
}
@keyframes zmp-dive-next-to-current {
from {
opacity: 0;
transform: translateZ(-150px);
}
50% {
opacity: 0;
}
to {
opacity: 1;
transform: translateZ(0px);
}
}
@keyframes zmp-dive-current-to-next {
from {
opacity: 1;
transform: translateZ(0px);
}
50% {
opacity: 0;
}
to {
opacity: 0;
transform: translateZ(-150px);
}
}
@keyframes zmp-dive-current-to-prev {
from {
transform: translateZ(0px);
opacity: 1;
}
50% {
opacity: 0;
}
to {
opacity: 0;
transform: translateZ(150px);
}
}
@keyframes zmp-dive-prev-to-current {
from {
opacity: 0;
transform: translateZ(150px);
}
50% {
opacity: 0;
}
to {
opacity: 1;
transform: translateZ(0px);
}
}