是否可以同时显示新旧页面?
Is it possible to show both the new and old pages simultaneously?
我正在尝试为平滑状态构建这样的效果:http://tympanus.net/Development/PageTransitions/,特别是 "room" 过渡。
我无法尝试同时显示两个页面 - 我希望新内容将旧内容推出屏幕。
后面有很多代码……一切正常,但它要等到旧内容离开屏幕后才开始添加新内容
$(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();
解决这个问题,以便在旧内容离开页面时保留它。
我的问题:除了等待 onStart
完成之外,还有其他方法可以访问 $newContent 吗?
注意:CSS 动画会出现相同的行为 - 它们在 onStart
结束时终止。
是的。诀窍是使用 setTimeout(,0)
到 运行 动画。为了简单起见,我最终将动画移动到 CSS class。由于内容重复(facebook、youtube 等),这在长页面上可能会滞后
它立即从 onStart 处理程序 returns 开始,但是 运行 动画一直持续到结束。准备就绪时调用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
}
我正在尝试为平滑状态构建这样的效果:http://tympanus.net/Development/PageTransitions/,特别是 "room" 过渡。
我无法尝试同时显示两个页面 - 我希望新内容将旧内容推出屏幕。
后面有很多代码……一切正常,但它要等到旧内容离开屏幕后才开始添加新内容
$(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();
解决这个问题,以便在旧内容离开页面时保留它。
我的问题:除了等待 onStart
完成之外,还有其他方法可以访问 $newContent 吗?
注意:CSS 动画会出现相同的行为 - 它们在 onStart
结束时终止。
是的。诀窍是使用 setTimeout(,0)
到 运行 动画。为了简单起见,我最终将动画移动到 CSS class。由于内容重复(facebook、youtube 等),这在长页面上可能会滞后
它立即从 onStart 处理程序 returns 开始,但是 运行 动画一直持续到结束。准备就绪时调用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
}