From c69c107de84aa3b2cdbf0ed087d0314f22d30b18 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 11 Feb 2022 12:10:58 +0100 Subject: fix: prevent content to be printed before transition end With `overflow-y: hidden`, the content was printed before the max height transition end. Switching to `overflow: hidden` fixed this issue. --- .../WidgetParts/ExpandableWidget/ExpandableWidget.module.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss') diff --git a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss b/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss index 2d6199b..cd63218 100644 --- a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss +++ b/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss @@ -49,7 +49,7 @@ width: 100%; max-height: 0; margin: 0 0 fun.convert-px(-6); // collapse borders - overflow-y: hidden; + overflow: hidden; visibility: hidden; transition: max-height 0.5s linear 0s, margin 0.3s ease-in-out 0.3s, visibility 0.1s linear 0.6s; @@ -88,7 +88,7 @@ margin: var(--spacing-sm) 0; overflow-y: visible; visibility: visible; - transition: visibility 0.1s linear 0s, max-height 0.6s ease-in 0s, + transition: visibility 0.1s linear 0s, max-height 0.6s linear 0s, margin 0.2s ease-in-out 0s; } } -- cgit v1.2.3