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

Question

我有一个带有 CSS 动画的手风琴，可以扩展点击的 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 的建议之后，取消绑定事件修复了我遇到的错误行为:)

Answer 1

你可以试试：

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

编辑：添加了解除绑定指令。

Answer 2

很难知道过渡何时结束。您可以假设 1000 毫秒，例如。

window.setTimeout(function () {
   // your scrolling
}, 1000);