From 8e113876658d50d2b69c0a71a4918f3465475e4e Mon Sep 17 00:00:00 2001
From: Antonio Ospite <ao2@ao2.it>
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 <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 {
--
2.1.4