Fix menu animation

diff --git a/scss/modules/_toggle-menu.scss b/scss/modules/_toggle-menu.scss
index 6969ef3..6c7ae3d 100644 (file)
--- 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/>.
 
 // 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 */
 @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;
     .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 {
     }
 
     .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 {
   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 {
       }
 
       ~ .toggle-menu__button--show {