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

Question

Так

Я пытаюсь построить навигацию, используя JQuery Transit

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

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

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 show() и hide(), но каждый раз, когда ul исчезает, как только начинается переход (по щелчку). И я тестировал Chrome, Firefox и Safari на случай каких-либо аномалий.

Answer 1

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

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