StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-24 14:34:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): tweak drawer open transition

Browse source 
Instead of using translate which can look jarring especially in large menus,
we use a combination of scale and opacity to achieve smoother effect while
saving more on performance.
This commit is contained in:
alistair3149 2022-05-01 20:17:06 -04:00
parent fae606277f
commit e2da010a90
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
2 changed files with 25 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
resources/skins.citizen.styles/Drawer.less
View file

@ -10,8 +10,10 @@
flex-direction: column;
align-items: center;
margin: var( --margin-header-item ) var( --margin-header-item--corner );
opacity: 0;
overscroll-behavior: contain;
transform: translate3d( -110%, -110%, 0 );
pointer-events: none;
transform: scale( 0 );
transform-origin: 0 0;
user-select: none;
will-change: transform;
@ -43,7 +45,19 @@
// Show drawer
~ #mw-drawer {
transform: none;
opacity: 1;
pointer-events: auto;
transform: scale( 1 );
#mw-drawer {
&-header,
&-menu {
opacity: 1;
// Fade content when users open the menu
// And GTFO instantly when they close the menu
transition: @transition-opacity--transform;
}
}
}
}
}
@ -103,6 +117,12 @@
}
}
// For transition purpose
&-header,
&-menu {
opacity: 0;
}
&-header {
display: flex;
width: 100%;
@ -214,7 +234,7 @@
.citizen-animations-ready {
#mw-drawer {
transition: @transition-transform;
transition: @transition-transform, @transition-opacity--transform;
}
}

2
resources/variables.less
View file

@ -225,6 +225,8 @@
@transition-opacity: opacity @transition-timing-fast ease;
@transition-transform: transform @transition-timing-slow cubic-bezier(0.215,0.61,0.355,1);
// Only used with transform
@transition-opacity--transform: opacity @transition-timing-slow ease;
@transition-height: height @transition-timing-slow cubic-bezier(0.215,0.61,0.355,1);
/* Box shadow */