Mirrors/super-productivity
1
0
Fork 0
mirror of https://github.com/johannesjo/super-productivity.git synced 2026-07-30 03:00:57 +00:00
Code Issues Projects Releases Wiki Activity

feat: update page transitions

Browse source
This commit is contained in:
Johannes Millan 2018-04-04 23:08:48 +02:00
parent 2dbd64b7dc
commit c39c433bce
2 changed files with 26 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

8
app-src/styles/_variables.scss
View file

@ -26,6 +26,8 @@ $layout-gt-lg: 1920px;
$ease-in-out-quint: cubic-bezier(.38, .04, .35, .96);
$transition-duration-xs: 200ms;
$transition-duration-s: 400ms;
$transition-duration-m: 600ms;
$transition-duration-l: 800ms;
$transition-duration-s: 250ms;
$transition-duration-m: 300ms;
$transition-duration-l: 600ms;
$page-transition-duration: $transition-duration-s;

30
app-src/styles/components/_ui-view.scss
View file

@ -3,30 +3,42 @@
height: 65px;
}
//[ui-view].ng-leave,
$this-transition-duration: $page-transition-duration;
[ui-view].ng-enter {
position: absolute;
top: 0;
left: 0;
right: 0;
transition: all .3s ease-in-out;
position: absolute;
transition: all $this-transition-duration $ease-in-out-quint;
}
[ui-view].ng-leave {
transition: all $this-transition-duration $ease-in-out-quint;
position: absolute;
height: 100%;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
[ui-view].ng-enter {
opacity: 0;
//transform: translate3d(0, -100%, 0);
transform: scale(0.9);
}
[ui-view].ng-enter-active {
opacity: 1;
//transform: translate3d(0, 0, 0);
transform: scale(1);
}
[ui-view].ng-leave {
//opacity: 1;
//transform: translate3d(0, 0, 0);
opacity: 1;
transform: scale(1);
}
[ui-view].ng-leave-active {
//opacity: 0;
//transform: translate3d(100%, 0, 0);
opacity: 0;
transform: scale(0.85);
}