fix(megamenu): move transition class adding at the begining and remov…

…e at the end
Orange-OpenSource · Feb 14, 2017 · c9eaefd · c9eaefd
1 parent 8d6a6ce
commit c9eaefd
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/js/src/o-megamenu.js b/js/src/o-megamenu.js
@@ -162,6 +162,7 @@ const MegaMenu = (($) => {
       if(!$this.next(Selector.NAV_MENU).length || $rootNav.hasClass(ClassName.TRANSITIONING)) {
           return false
       }
+      $rootNav.addClass(ClassName.TRANSITIONING)
 
       // hide all nav on same level
       $thisNav.find(Selector.NAV_MENU).hide()
@@ -180,14 +181,13 @@ const MegaMenu = (($) => {
       $targetNav.find(Selector.NAV_LINK).attr({'tabindex': 0, 'aria-hidden': false})
 
       // translate menu
-      $rootNav.addClass(ClassName.TRANSITIONING)
       $rootNav.css('transform', 'translateX('+(currentTranslatePercentage - 100)+'%)')
 
       // focus on target nav first item
       $rootNav.one('transitionend', function() {
-        $rootNav.removeClass(ClassName.TRANSITIONING)
         $thisNavToggler.attr('aria-expanded', true)
         $targetNav.find(Selector.NAV_LINK).not(Selector.NAV_LINK_BACK).first().trigger('focus')
+        $rootNav.removeClass(ClassName.TRANSITIONING)
       })
     }
 
@@ -207,6 +207,7 @@ const MegaMenu = (($) => {
       if(currentTranslatePercentage === 0 || $rootNav.hasClass(ClassName.TRANSITIONING)) {
           return false
       }
+      $rootNav.addClass(ClassName.TRANSITIONING)
 
       // make only visible elements focusable
       $targetNav.find(Selector.NAV_LINK).attr({'tabindex': 0, 'aria-hidden': false})
@@ -217,15 +218,14 @@ const MegaMenu = (($) => {
       }
 
       // translate menu
-      $rootNav.addClass(ClassName.TRANSITIONING)
       $rootNav.css('transform', 'translateX('+(currentTranslatePercentage + 100)+'%)')
 
       // focus on target nav first item
       $rootNav.one('transitionend', function() {
-        $rootNav.removeClass(ClassName.TRANSITIONING)
         $targetNavToggler.attr('aria-expanded', false)
         $targetNavToggler.trigger('focus')
         $thisNav.hide()
+        $rootNav.removeClass(ClassName.TRANSITIONING)
       })
     }