使用 transit js 和 jQuery，回调完成功能无法正常工作。

Question

所以

我正在尝试使用 jquery transit

构建一些导航

opens/slide 向下导航工作正常。它将子 ul 设置为显示块，然后运行 animation/transition。

关闭导航项时出现问题。尽管 ul 被写入回调中，但它会立即被隐藏。我还添加了 'animation ended' 的控制台日志，一旦转换完成并且它在正确的时间触发，所以不确定为什么 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;
    });

}());

我这里有一个 fiddle 可以修改：http://jsfiddle.net/lharby/o5w8ebu8/2/

我尝试了使用 css 可见性、jquery show() 和 hide() 函数的各种组合，但每次 ul 都会随着转换开始而消失（有效地单击）。我已经测试了 Chrome、Firefox 和 Safari，以防出现任何异常情况。

Answer 1

我相信回调在正确的时间（1000 毫秒后）触发，问题是过渡动画不起作用。

在收缩过渡上更改为'height': 'auto'似乎可以达到您想要的效果。虽然我不能说我真的知道为什么。

使用 transit js 和 jQuery，回调完成功能无法正常工作。

Callback complete function not working properly using transit js and jQuery.

javascript

jquery

transition

jquery-transit