Функция полной обработки обратного вызова не работает должным образом с использованием транзитных js и jQuery.

Question

Так

Я пытаюсь построить некоторые навигации с помощью jquery transit

открывающий/скользить вниз навигация работает нормально. Он устанавливает дочернюю ul для отображения блока, а затем запускает анимацию/переход.

Проблема возникает при закрытии элемента навигации. Уль прячется сразу же, когда записывается внутри обратного вызова. Я также добавил, что консольный журнал «анимации закончился» после завершения перехода, и это срабатывает в нужное время, поэтому не уверен, почему ul скрывается немедленно.

The Jquery/JS выглядит следующим образом:

var dropDown = (function(){ 

    var mainNav   = $('#mainNav'); 
    var navA   = mainNav.find('li a'); 
    var navUL   = mainNav.find('ul'); 
    var iconAll   = mainNav.find('i'); 
    navUL.transition({ 
     'max-height': '0px', 
     'height':  '0px', 
     'overflow':  'hidden', 
     'display':  'none' 
    }); 
    navA.on('click',function(){ 
     var nextUL   = $(this).next(); 
     var icon   = $(this).find('i'); 
     var nextULHidden = nextUL.css('display') === 'none'; 
     if(nextULHidden) { 
      nextUL.css('display','block').transition({ 
       duration:  1000, 
       'height':  'auto', 
       'max-height': '1000px', 
       easing:   'ease-in' 
      }); 
      $(this).addClass('active'); 
      icon.removeClass('fa-chevron-down').addClass('fa-chevron-up'); 
      console.log('hidden'); 
     }else if(!nextULHidden){ 
      nextUL.transition({ 
       duration:  1000, 
       'height':  '0px', 
       'max-height': '0px', 
       easing:   'ease-in', 
       complete: function(){ 
        nextUL.css('display','none'); 
        console.log('animation ended'); 
       } 
      }); 
      $(this).removeClass('active'); 
      icon.removeClass('fa-chevron-up').addClass('fa-chevron-down'); 
      console.log('visible'); 
     }else{ 
      console.log('some error'); 
     } 
     return false; 
    }); 

}()); 

И у меня есть скрипка здесь, которые могут быть возились с: http://jsfiddle.net/lharby/o5w8ebu8/2/

Я пробовал различные комбинации использования видимости CSS, Jquery шоу () и hide(), но каждый раз, когда ul исчезает по мере начала перехода (по клику эффективно). И я протестировал Chrome, Firefox и Safari на случай, если будут какие-то аномалии.

Answer 1

Я считаю, что обратный вызов срабатывает в правильное время (после 1000 миллисекунд), проблема заключается в том, что анимация перехода не работает.

Изменение на 'height': 'auto' на переходный переход, кажется, обеспечивает эффект, который вы оказываете после. Хотя я не могу сказать, что я действительно знаю, почему.