From: Antonio Ospite <ao2@ao2.it>
Date: Mon, 3 Jul 2017 07:17:43 +0000 (+0200)
Subject: Fix menu animation
X-Git-Url: https://git.ao2.it/experiments/scss-responsive-toggle-menu.git/commitdiff_plain/HEAD?ds=inline;hp=460b4323d7be03e27489db0620e1be0cffdeec60

Fix menu animation
---

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 <http://www.gnu.org/licenses/>.
 
+$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 {