From e2a6a0355c134775f57fe7c88507ad2c423badf2 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Sun, 1 May 2022 21:46:30 -0400 Subject: [PATCH] feat(core): toggle visbility in CSS when menu is show/hidden * Better performance as browser would not render element when it is hidden * Better accessbility support for screen readers --- resources/mixins.less | 6 +++++- resources/variables.less | 3 +++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/resources/mixins.less b/resources/mixins.less index a98f58fb..e618b194 100644 --- a/resources/mixins.less +++ b/resources/mixins.less @@ -15,6 +15,7 @@ // Collaspe animation setup .citizen-card-hide( @position, @axis: '' ) { opacity: 0; + visibility: hidden; pointer-events: none; transform: ~'scale@{axis}( 0 )'; transform-origin: @position; @@ -23,13 +24,16 @@ // Expand animiation setup .citizen-card-show() { opacity: 1; + visibility: visible; pointer-events: auto; transform: none; + // HACK: So that visiblity won't wait 250ms to become visible + transition-delay: 0ms; } // Transition animation .citizen-card-transition() { - transition: @transition-transform, @transition-opacity--transform; + transition: @transition-transform, @transition-opacity--transform, @transition-visibility--transform; } // To hide objects, but keep them accessible for screen-readers diff --git a/resources/variables.less b/resources/variables.less index cb652a8a..28cb76fc 100644 --- a/resources/variables.less +++ b/resources/variables.less @@ -227,6 +227,9 @@ @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; +// Execute after every transition is done +// Need to use with transition-delay: 0ms +@transition-visibility--transform: visibility 0ms linear @transition-timing-slow; @transition-height: height @transition-timing-slow cubic-bezier(0.215,0.61,0.355,1); /* Box shadow */