From 8e113876658d50d2b69c0a71a4918f3465475e4e Mon Sep 17 00:00:00 2001 From: Antonio Ospite Date: Mon, 3 Jul 2017 09:17:43 +0200 Subject: [PATCH] Fix menu animation --- scss/modules/_toggle-menu.scss | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/scss/modules/_toggle-menu.scss b/scss/modules/_toggle-menu.scss index 6969ef3..6c7ae3d 100644 --- a/scss/modules/_toggle-menu.scss +++ b/scss/modules/_toggle-menu.scss @@ -15,6 +15,8 @@ // You should have received a copy of the GNU General Public License // along with this program. If not, see . +$toggle-menu-transition-delay: .25s; + @mixin _toggle-menu-common($show-menu-id) { /* common fallback style for when :target is not supported */ @@ -41,6 +43,11 @@ .toggle-menu__list .toggle-menu__item { overflow: hidden; height: 0; + -moz-transition: height $toggle-menu-transition-delay; + -ms-transition: height $toggle-menu-transition-delay; + -o-transition: height $toggle-menu-transition-delay; + -webkit-transition: height $toggle-menu-transition-delay; + transition: height $toggle-menu-transition-delay; } .toggle-menu__button--show { @@ -137,12 +144,13 @@ $imported-once: false !default; body:not(:target) .toggle-menu { ##{$show-menu-id}:target { ~ .toggle-menu__list .toggle-menu__item { - height: auto; - -moz-transition: height .25s; - -ms-transition: height .25s; - -o-transition: height .25s; - -webkit-transition: height .25s; - transition: height .25s; + // NOTE: for the transition animation to work 'height' cannot be auto. + height: 2em; + -moz-transition: height $toggle-menu-transition-delay; + -ms-transition: height $toggle-menu-transition-delay; + -o-transition: height $toggle-menu-transition-delay; + -webkit-transition: height $toggle-menu-transition-delay; + transition: height $toggle-menu-transition-delay; } ~ .toggle-menu__button--show { -- 2.1.4