From 95eefc5b24f7ba1fb1eeff62ad63a48a24f713e3 Mon Sep 17 00:00:00 2001 From: Stephen Niedzielski Date: Mon, 5 Aug 2019 14:48:09 -0600 Subject: [PATCH] [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 --- components/ToggleList/DropDownList.less | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/components/ToggleList/DropDownList.less b/components/ToggleList/DropDownList.less index f514e0b..7df1fbb 100644 --- a/components/ToggleList/DropDownList.less +++ b/components/ToggleList/DropDownList.less @@ -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 ); }