是否可以同时显示新页面和旧页面? [英] Is it possible to show both the new and old pages simultaneously?

问题描述

我正在尝试为平滑状态构建这样的效果: http://tympanus.net/Development/PageTransitions/，特别是房间"过渡.

I'm trying to build an effect like this for smoothstate: http://tympanus.net/Development/PageTransitions/, specifically the "room" transitions.

我一直无法尝试同时显示两个页面-我希望新内容将旧内容推离屏幕.

I'm getting stuck on trying to display both pages at once - I want the new content to push the old off the screen.

许多代码都在后面...它们都可以工作，但是要等到旧内容显示在屏幕上之后才能开始添加新内容

$(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的持续时间更改为短于动画的持续时间是可以的，但是这只会缩短动画的播放时间，并留下空白屏幕.

I would have though that changing the onStart duration to be shorter than the animation duration would work, but it just cuts the animation short, leaving a blank screen.

我知道$container用于这两种方式，但是我相信我可以使用$container.clone();修复该问题，以在页面移出页面时保留旧内容.

I'm aware that $container is used for both, but I believe I can fix that with $container.clone(); to hold the old content while it moves off the page.

我的问题:除了等待onStart完成之外，还有其他方法可以访问$ newContent吗?

My question: is there a way to access $newContent other than waiting for onStart to complete?

注意:CSS动画也会发生相同的行为-它们在onStart的结尾处终止.

Note: the same behavior occurs with CSS animations - they terminate at the end of onStart.

推荐答案

是.诀窍是使用setTimeout(,0)来运行动画.为了简单起见，我最终将动画移到CSS类.由于内容重复(facebook，youtube等)，这可能会导致较长页面上的内容滞后.

Yes. The trick is to use setTimeout(,0) to run the animation. I ended up moving the animations to a CSS class for simplicity. This may be laggy on long pages due to content duplication (facebook, youtube, etc.)

它立即从onStart处理程序中返回，但是将动画一直运行到最后.准备就绪时，它将调用onReady并开始输入动画.

It immediately returns from the onStart handler, but runs the animation through to the end. It calls onReady when ready and starts the entry animation.

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

这篇关于是否可以同时显示新页面和旧页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！