更新

Question

我正在尝试使用jQuery Ajax和GSAP TweenMax创建无缝的页面过渡。

对于基础知识，我设置了一个简单的淡入淡出动画以对新页面进行动画处理：

$.ajax({
    url: href,
    success: function(data) {
        // Do animation
        console.log('ajax call success');
        console.log(data);

        $('.main').fadeOut(250, function() {
            var newPage = $(data).filter('.main').html();
            $('.main').html(newPage);
            // window.history.pushState(null, null, href + '#reloaded');
            $('.main').fadeIn(250, function() {
                window.location.reload();
            });
        });
    },
    error: function(err) {
        console.log(err);
    }
});

以上代码将通过单击按钮触发，并且可能会起作用。但是，我想在GreenSock TweenMax上走得更远。我要实现的目标如下。

在两个页面上都有一个.preloader div，其宽度为0％：

.preloader {
    height: 100%;
    width: 0;
    background: #120047;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
}

单击按钮时，.preloader的动画宽度应为100％。我已经做到了：

TweenMax.to(preloader, 0.5, {
    width: $(window).width(), 
    right: 0, 
    ease: "snappy",
    onComplete: function() {
        var newPage = $(data).filter('.main').html();
        $('.main').html(newPage);

        TweenMax.set(preloader, {
            width: $(window).width()
        });

        TweenMax.to(preloader, 0.5, {
            width: 0,
            right: 0,  
            ease: "snappy"
        });
    }
});

因此，使用以上代码，.preloader将从左侧动画为100％的宽度。动画完成后，内容将添加到页面。然后，该页面的预加载器应与整个页面重叠，并且在加载内容后，将宽度动画化为零。也许这还行不通，因为在将新内容添加到页面后，您将看到默认的页面过渡（因此没有过渡）。

如果甚至可以在叠加层中进行动画处理，那么重新加载页面并直接在叠加层中进行动画处理是最终的愿望。

更新

我已经编写了实现上述目标的正确代码，但是仍然存在问题。动画从index.html到about.html工作，但是从about.html到index.html，动画不会滑出，而是一个艰难的过渡。

var preloader = $('.preloader');                
            TweenMax.to(preloader, 0.5, {
                width: $(window).width(), 
                right: 0, 
                ease: "smoothInOut",
                onComplete: function() {
                    // preloader.remove();

                    var newPage = $(data).filter('.main').html();
                    $('.main').html(newPage);

                    TweenMax.set(preloader, {
                        width: $(window).width(), 
                        onComplete: function() {
                            TweenMax.to(preloader, 0.5, {
                                width: 0,
                                left: 0,  
                                ease: "snappy", 
                                onComplete: function() {
                                    window.location.reload();
                                }
                            });
                        }
                    });
                }
            });

如何使用TweenMax创建无缝的页面过渡？

更新

0 个答案: