Added (test) page transitions

This commit is contained in:
2018-06-11 18:35:58 +10:00
parent 2052dd39ee
commit 9dd724a8d4
10 changed files with 158 additions and 25 deletions

View 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 {
}
}
}

View File

@ -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);
}