Added (test) page transitions
This commit is contained in:
57
public/styles/objects/_page-transition.scss
Normal file
57
public/styles/objects/_page-transition.scss
Normal file
@ -0,0 +1,57 @@
|
||||
/*
|
||||
* 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%;
|
||||
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 {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
@ -6,5 +6,10 @@
|
||||
* 1.0.0 - 2018/05/07
|
||||
*/
|
||||
.o-main {
|
||||
@include t-flex-grow(1);
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
|
||||
@extend %t-flexbox;
|
||||
@include t-flex-direction(column);
|
||||
}
|
||||
|
Reference in New Issue
Block a user