是否可以同时显示新旧页面？

我正在尝试为smoothstate构建这样的效果： http ：//tympanus.net/Development/PageTransitions/，特别是“房间”过渡。

我一下子试图同时显示两个页面 – 我希望新内容能够将旧内容推出屏幕。

很多代码都遵循……一切正常，但它等到旧内容离屏后开始添加新内容

$(function(){ 'use strict'; var options = { prefetch: true, cacheLength: 10, onStart: { duration: 500, // Duration of our animation render: function ($container) { // scroll up $("html, body").animate({ scrollTop: "0px" }); var element = $('.row', $container); // do animations $(element).animate({opacity : 0}, { duration: 500, easing: "linear", step: function(number, tween) { number = 1 - number; var element = document.getElementsByClassName('row')[0]; element.style.transform = "translateX(-" + 45*number + "%) rotateY(" + 90*number + "deg)"; } }); } }, onReady: { duration: 500, render: function ($container, $newContent) { // Inject the new content $container.html($newContent); $container.css({overflow : 'hidden'}); // do animations var element = document.getElementById($container[0].id).getElementsByClassName('row')[0]; element.style.opacity = 0; $(element).animate({opacity : 1}, { duration: 500, step: function(number, tween) { number = 1 - number; var element = document.getElementsByClassName('row')[0]; element.style.transform = "translateX(" + 45*number + "%) rotateY(-" + 90*number + "deg)"; } }); } } }, smoothState = $('#main').smoothState(options).data('smoothState'); }); 

虽然我可以将onStart持续时间更改为比动画持续时间更短的工作，但它只会缩短动画时间，留下空白屏幕。

我知道$container用于两者，但我相信我可以使用$container.clone(); 在旧内容离开页面时保留旧内容。

我的问题：有没有办法访问$ newContent而不是等待onStart完成？

注意：CSS动画会出现相同的行为 – 它们在onStart结束时终止。

Answer 1

是。 诀窍是使用setTimeout(,0)来运行动画。 为简单起见，我最终将动画移动到CSS类。 由于内容重复（Facebook，youtube等），这可能在长页面上滞后

它立即从onStart处理程序返回，但运行动画直到结束。 它在准备好时调用onReady并启动输入动画。

 [...] onStart: { duration: 0, render: function ($container) { $('#tempWrapper').remove(); //if we have the temp wrapper, kill it now. $("html, body").animate({ scrollTop: "0px" }); //make a duplicate container for animation... var $newContainer = $container.clone(); $newContainer.attr("id", "tempWrapper"); $newContainer.css({position:'absolute', top:$container.offset().top, width:$container.css("width")}); $container.css({height:$container.css("height")}); $container.empty(); //empty the old content so that it takes up 0 space $container.before($newContainer); // and immediately add the duplicate back on $('.row').removeClass('entering'); // just in case we have the class still var element = $('.row', $newContainer); setTimeout(callAnimation(element, true), 0); //start the animation } }, onReady: { duration: 0, render: function ($container, $newContent) { // Inject the new content $container.html($newContent); // do animations var element = document.getElementById($container[0].id).getElementsByClassName('row')[0]; callAnimation(element); } } [...] function callAnimation(element, exiting) { if (!exiting) { $(element).addClass("entering"); } else { $(element).addClass('exiting'); } } 

Answer 2

希望你还需要它。 这就是我实现这个的方式：

 $(function () { //'use strict'; var $page = $('.m-scene'), options = { debug: true, onStart: { duration: 0, render: function ($container) { $('.m-page.temp').remove(); //make sure we don't have more than two `pages` at a time $('#move').removeClass('slideup'); //remove old animation; #move is the wrapper for original and injected content $container.find('.m-page').addClass('temp'); //mark original content for removal } }, onReady: { duration: 50, //prevents flickering of content render: function ($container, $newContent) { $('#move').append($newContent.find('.m-page')); //select only stuff you actually need injected } }, onAfter: function ($container, $newContent) { var target = $('#move'); animate(target); //it's animation time! } }, smoothState = $page.smoothState(options).data('smoothState'); }); function animate(target) { target.addClass('slideup'); //add animation class }