延迟 Turbolink 访问关闭画布菜单

Question

我正在使用 TurboLinks 和一个以动画结束的 off-canvas menu。到时候，Turbolinks 在菜单完全关闭之前就换了个页面，显得有些仓促。我尝试添加超时并修改 TurboLinks 的事件，但没有任何运气。 Javascript/Jquery 真的不是我的强项，所以，我的问题是：有没有办法延迟 TurboLinks 请求的触发，以便菜单可以正常关闭？

钯。我正在使用 Laravel 进行开发。

更新：

在documentation我发现你不能在开始之前取消访问。考虑到这一点，我设置了这个

$(document).on('turbolinks:before-visit', function(e){
    var url = event.data.url;
    console.log(url);
    event.preventDefault();
    e.stopImmediatePropagation();

    setTimeout(function(url){
        Turbolinks.visit(url);
    }, 1000);
});

但是，正如我在 @OhGodWhy 的 cmets 行中所说，一切都崩溃了，页面卡住了，并且控制台中多次显示错误“超出最大调用堆栈大小”。

Answer 1

有一个 RFC 规定您不能在没有他们干预的情况下减慢/停止用户离开页面的过程；因此，当您想离开页面时，为什么您会看到 alert 窗口弹出，但您仍然可以单击“继续”继续离开。

也就是说，我可以给你一个解决方案。他们所有的动画都是 CSS3 驱动的，你唯一需要担心的是切换类的 javascript。

$('.sidebar').on('click', 'a', function(e){
    e.preventDefault();

    var $this = $(this);

    if ($('body').hasClass('st-menu-open')) {
        $('body').removeClass('st-menu-open')
        setTimeout(function(){
           Turbolinks.visit($this.prop('href'));
        }, 500);
    }
});

我们在这里所做的只是在您的导航中捕获点击，如果主体有类，那么我们将删除它。但是，我们将等待500ms，它对应于库使用的CSS transition delay，直到我们执行重定向。这样，在 500 毫秒后，转换将完成，您可以重定向用户。