zmp-core
Version:
Full featured mobile HTML framework for building iOS & Android apps
78 lines (77 loc) • 1.6 kB
text/less
// zmp-parallax
.router-transition-zmp-parallax-forward {
.page-next {
animation: zmp-parallax-next-to-current var(--zmp-page-parallax-transition-duration) forwards;
}
.page-current {
animation: zmp-parallax-current-to-prev var(--zmp-page-parallax-transition-duration) forwards;
}
}
.router-transition-zmp-parallax-backward {
.page-current {
animation: zmp-parallax-current-to-next var(--zmp-page-parallax-transition-duration) forwards;
}
.page-previous {
animation: zmp-parallax-prev-to-current var(--zmp-page-parallax-transition-duration) forwards;
}
}
.router-transition-zmp-parallax-forward,
.router-transition-zmp-parallax-backward {
.page-next,
.page-current,
.page-previous:not(.stacked) {
pointer-events: none;
}
}
@keyframes zmp-parallax-next-to-current {
from {
.ltr({
transform: translateX(100%);
});
.rtl({
transform: translateX(-100%);
});
}
to {
transform: translateX(0%);
}
}
@keyframes zmp-parallax-current-to-next {
from {
transform: translateX(0%);
}
to {
.ltr({
transform: translateX(100%);
});
.rtl({
transform: translateX(-100%);
});
}
}
@keyframes zmp-parallax-current-to-prev {
from {
transform: translateX(0%);
}
to {
.ltr({
transform: translateX(-20%);
});
.rtl({
transform: translateX(20%);
});
}
}
@keyframes zmp-parallax-prev-to-current {
from {
.ltr({
transform: translateX(-20%);
});
.rtl({
transform: translateX(20%);
});
}
to {
transform: translateX(-0%);
}
}