Fix menu animation

[experiments/scss-responsive-toggle-menu.git] / scss / modules / _toggle-menu.scss

diff --git a/scss/modules/_toggle-menu.scss b/scss/modules/_toggle-menu.scss
index 1cb6f4d..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 {


@@ -52,6 +59,7 @@
     }
   }
 
     }
   }
 

+  /* common big screen style for when :target is supported */

   @media screen and (min-width: 48.25em) {
     body:not(:target) .toggle-menu {
       .toggle-menu__list .toggle-menu__item {
   @media screen and (min-width: 48.25em) {
     body:not(:target) .toggle-menu {
       .toggle-menu__list .toggle-menu__item {


@@ -64,6 +72,7 @@
 
 @mixin _toggle-menu-theme {
 
 
 @mixin _toggle-menu-theme {
 

+  /* toggle-menu theming */

   .toggle-menu {
 
     a {
   .toggle-menu {
 
     a {


@@ -135,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, line-height .25s;
-        -ms-transition: height .25s, line-height .25s;
-        -o-transition: height .25s, line-height .25s;
-        -webkit-transition: height .25s, line-height .25s;
-        transition: height .25s, line-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 {