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

我正试图为smoothstate:，特别是“房间”过渡，构建一个类似这样的效果

我一直在试图同时显示两个页面——我希望新内容能将旧内容从屏幕上推掉

接下来有很多代码……它们都可以工作，但要等到旧内容脱离屏幕后才能开始添加新内容

我认为将

onStart

持续时间更改为短于动画持续时间是可行的，但这只会缩短动画，留下一个空白屏幕

我知道，

$container

用于这两个方面，但我相信我可以用

$container.clone（）解决这个问题

以在旧内容移出页面时保留它

我的问题：除了等待

onStart

完成之外，还有什么方法可以访问$newContent吗？

---

注意：CSS动画也会出现同样的行为-它们在开始时终止。诀窍是使用

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');
    }
}

---

对。诀窍是使用

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');
    }
}

---

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

$(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
}

---

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

$(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
}