zmp-core
Version:
Full featured mobile HTML framework for building iOS & Android apps
91 lines (90 loc) • 2.04 kB
text/less
// zmp-flip
.router-transition-zmp-flip-forward,
.router-transition-zmp-flip-backward {
background: #000;
perspective: 1200px;
.page {
backface-visibility: hidden;
}
.page-next,
.page-current,
.page-previous:not(.stacked) {
pointer-events: none;
}
}
.router-transition-zmp-flip-forward {
.page-next {
animation: zmp-flip-next-to-current var(--zmp-page-flip-transition-duration) forwards;
}
.page-current {
animation: zmp-flip-current-to-prev var(--zmp-page-flip-transition-duration) forwards;
}
}
.router-transition-zmp-flip-backward {
.page-current {
animation: zmp-flip-current-to-next var(--zmp-page-flip-transition-duration) forwards;
}
.page-previous {
animation: zmp-flip-prev-to-current var(--zmp-page-flip-transition-duration) forwards;
}
}
@keyframes zmp-flip-next-to-current {
from {
border-radius: 30px;
.ltr({
transform: translateZ(-100vmax) rotateY(180deg);
});
.rtl({
transform: translateZ(-100vmax) rotateY(-180deg);
});
}
to {
border-radius: 0;
transform: translateZ(0px) rotateY(0deg);
}
}
@keyframes zmp-flip-current-to-next {
from {
border-radius: 0px;
transform: translateZ(0px) rotateY(0deg);
}
to {
border-radius: 30px;
.ltr({
transform: translateZ(-100vmax) rotateY(180deg);
});
.rtl({
transform: translateZ(-100vmax) rotateY(-180deg);
});
}
}
@keyframes zmp-flip-current-to-prev {
from {
border-radius: 0px;
transform: translateZ(0px) rotateY(0deg);
}
to {
border-radius: 30px;
.ltr({
transform: translateZ(-100vmax) rotateY(-180deg);
});
.rtl({
transform: translateZ(-100vmax) rotateY(180deg);
});
}
}
@keyframes zmp-flip-prev-to-current {
from {
border-radius: 30px;
.ltr({
transform: translateZ(-100vmax) rotateY(-180deg);
});
.rtl({
transform: translateZ(-100vmax) rotateY(180deg);
});
}
to {
border-radius: 0px;
transform: translateZ(0px) rotateY(0deg);
}
}