framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
85 lines (84 loc) • 1.9 kB
text/less
.md {
.page-previous {
transform: translate3d(-24px, 0px, 0);
}
.page-next {
pointer-events: none;
transform: translate3d(128px, 0px, 0);
opacity: 0;
&.page-next-on-right {
.ltr({
transform: translate3d(100%, 0, 0);
opacity: 1;
});
.rtl({
transform: translate3d(-100%, 0, 0);
opacity: 1;
});
}
}
// Animations
.router-transition-forward {
.page-next {
opacity: 1;
animation: md-page-next-to-current var(--f7-page-transition-duration) forwards
cubic-bezier(0, 0.8, 0.3, 1);
}
.page-current {
animation: md-page-current-to-previous var(--f7-page-transition-duration) forwards
cubic-bezier(0, 0.8, 0.3, 1);
}
}
.router-transition-backward {
.page-current {
animation:
md-page-current-to-next calc(var(--f7-page-transition-duration) / 2) forwards
cubic-bezier(0, 1, 0.8, 1),
md-page-current-to-next-opacity calc(var(--f7-page-transition-duration) / 2) forwards;
}
.page-previous {
animation: md-page-previous-to-current calc(var(--f7-page-transition-duration) / 2) forwards
cubic-bezier(0, 1, 0.8, 1);
}
}
}
@keyframes md-page-next-to-current {
from {
transform: translate3d(128px, 0px, 0);
}
to {
transform: translate3d(0px, 0px, 0);
}
}
@keyframes md-page-current-to-next {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(128px, 0px, 0);
}
}
@keyframes md-page-current-to-next-opacity {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes md-page-current-to-previous {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-24px, 0px, 0);
}
}
@keyframes md-page-previous-to-current {
from {
transform: translate3d(-24px, 0px, 0);
}
to {
transform: translate3d(0, 0px, 0);
}
}