58 lines
928 B
SCSS
58 lines
928 B
SCSS
/*
|
|
* Page Transition
|
|
* Provides the transitions for all page changing.
|
|
*
|
|
* Dependencies:
|
|
*
|
|
* Version:
|
|
* 1.0.0 - 2018/06/08
|
|
*/
|
|
@include t-keyframes(o-page-transition--exit) {
|
|
from {
|
|
@include t-translate-x(0%);
|
|
}
|
|
|
|
to {
|
|
@include t-translate-x(100%);
|
|
}
|
|
}
|
|
|
|
.o-page-transition__container {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.o-page-transition {
|
|
|
|
&-enter {
|
|
&-active {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 0;
|
|
}
|
|
|
|
&-done {
|
|
}
|
|
}
|
|
|
|
&-exit {
|
|
&-active {
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background: $s-color--background;
|
|
@include t-animation-timing-function($s-animation--ease-in-out);
|
|
@include t-animation-name(o-page-transition--exit);
|
|
@include t-animation-duration(1s);
|
|
@include t-animation-fill-mode(forwards);
|
|
z-index: $s-z--transition;
|
|
}
|
|
|
|
&-done {
|
|
|
|
}
|
|
}
|
|
}
|