Question

我对ajax和历史状态很新。现在，我正在使用 pjax 加载博客文章。像codrops medium style transitions这样的东西。因为我重新创建了相同的效果并且没有使用任何codrop的代码，所以我无法通过后退和前进按钮来解决问题。或者我可能把事件都设置错了。或者一般都认为这一切都错了。

// Function to refresh the .current and .next elements
function refreshSelectors(){
    $blogpost_current = $('.current');
    $blogpost_next = $('.next');
};


$_(document).on("click", "*[data-pjax]", function(e) {
    e.preventDefault();

    // Get url
    var href = $(this).attr('href');

    // Fade out current post
    $blogpost_current.addClass('fade-up-out');

    // Get the difference in height between .next and top of window
    var translateValue = $blogpost_next.get(0).getBoundingClientRect().top;

    // Add easing class on .next to move it to the top.
    $blogpost_next.addClass('easing-upward').css({"transform": "translate3d(0, -" + translateValue + "px, 0"});

    // Remove .next class and set it as current
    $blogpost_next.removeClass('next').addClass('current');

    // After 450ms
    setTimeout(function(){
        // Remove old .current post
        $blogpost_current.remove();

        // Remove easing-upward class on .next
        $blogpost_next.removeClass('easing-upward');

        // Snap it in place
        $blogpost_next.css({"transform": ""});

        // Scroll to top
        $body.scrollTop(0);
        $html.scrollTop(0);

        // Refersh selectorer
        refreshSelectors();

        // Create new .next section, to fill the ajax content into
        $blogpost_current.after('<section class="page next"></section>')

        // Refersh selectorer
        refreshSelectors();

        // Make the pjax call
        $.pjax({url: href, container: $blogpost_next, fragment: ".next", timeout: 2000});

    }, 450)
});

所以基本上，当前和下一个条目最初都加载到页面上。并隐藏.next内的内容。并且仅在课程更改为.current时才可见。请注意，只有在动画完成时才会创建新的.next并由pjax填充。也许我应该使用其他事件呢？那里的那个计时器可能已经被置于实际的事件中了？

或者，让后退和前进按钮实际重新加载页面可能是最简单的。

$(document).on('pjax:popstate', function(event) { 
    location.reload();
});

什么是最好的解决方案？当正确完成时，这是由pjax处理的吗？或者我是否必须收听popstate事件才能获得正确的内容？并可能反过来激活它？

pjax - 前进和后退按钮。强制整页重新加载？

0 个答案: