javascript - jQuery - CSS 转换完成后运行函数

Question

我有一个带有 CSS 动画的 Accordion ，可以展开点击的 li。这是使用 li:target 完成的。

现在，我想滚动到被点击的 id，但由于 css 转换，它最终定位在转换被激活之前 li 所在的位置。

这是我目前的 javascript 片段:

$(document).on('click', '#accordion li', function (e){
    e.preventDefault(); 

      // Call the scroll function
    goToByScroll($(this).attr("id"));
    $('#accordion li').height('');
    $(this).height($('section', $(this)).outerHeight() + $('a', $(this)).outerHeight());
});

// This is a functions that scrolls to #ID

function goToByScroll(id){
    // Scroll
    // Wait until CSS transition is done

    $("#"+id).bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ 
        $('html,body').animate({
            scrollTop: $("#"+id).offset().top},
            'fast');
        $("#"+id).unbind();
    });  
}   

Edit2:根据 Piotr 的建议，取消绑定(bind)事件修复了我遇到的错误行为:)

Answer 1

你可以试试:

$("#"+id).bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(event){ 
    $('html,body').animate({
    scrollTop: $("#"+id).offset().top},
    'fast'
    );
    $(this).unbind(event);
});

编辑:添加了解除绑定(bind)指令。