golem
/
MinervaNeue
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[fix] [UI] [menu] animate page actions & user menus out 

Add a workaround to animate the page actions and user menus out instead
of only in. This functionality was intentionally disabled to avoid to
avoid a Chromium bug[0] but can be worked around by setting transition
duration in JavaScript. The effect is no animations in no-JS mode and
full animations in JS mode.

[0] https://bugs.chromium.org/p/chromium/issues/detail?id=332189

Change-Id: Ife8c0304783dc175ebefd53f3d7b104c8a5db01d
This commit is contained in:
Stephen Niedzielski 2019-08-05 14:48:09 -06:00
parent fb383c6356
commit 95eefc5b24
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/ToggleList/DropDownList.less
View File

@ -5,18 +5,20 @@
.toggle-list__list--drop-down {
transform: translateY( -8px );
// Animate menu visibility, opacity, and translation changes in and out. Visibility must be
// animated since it's a boolean and nothing can be seen in display hidden. Visibility itself
// cannot be animated as it causes a flash on page load in Chromium due to
// https://bugs.chromium.org/p/chromium/issues/detail?id=332189. The effect is that the menu is
// animated in but not animated out.
.transition( opacity .1s ease-in-out, -webkit-tap-highlight-color 0s ease-in-out, transform .1s ease-in-out; );
// When cursor is pointer and -webkit-tap-highlight-color is set, the color does not seem to
// transition. Clear it.
-webkit-tap-highlight-color: transparent;
}
.animations {
.toggle-list__list--drop-down {
// Animate menu visibility, opacity, and translation changes in and out. Visibility duration
// cannot be animated initially as it causes a flash on page load in Chromium due to
// https://bugs.chromium.org/p/chromium/issues/detail?id=332189.
.transition( opacity .1s ease-in-out, -webkit-tap-highlight-color 0s ease-in-out, transform .1s ease-in-out, visibility .1s ease-in-out; );
}
}
.toggle-list__checkbox:checked ~ .toggle-list__list--drop-down {
transform: translateY( 0 );
}