我在modernizr中使用History API构建了一个网站,其中包含用于平滑加载的CSS3页面转换。这是代码。
$(document).ready(function(event){
var isAnimating = false,
firstLoad = false;
$('.menu a').on('click', function(event){
event.preventDefault();
var newPage = $(this).attr('href');
if( !isAnimating ) changePage(newPage, true);
firstLoad = true;
});
$(window).bind('popstate', function() {
if(firstLoad) {
var newPageArray = location.pathname.split('/'),
newPage = newPageArray[newPageArray.length - 1];
if( !isAnimating ) changePage(newPage, false);
}
firstLoad = true;
});
function changePage(url, bool) {
isAnimating = true;
$('body').addClass('page-is-changing').removeClass('show-menu');
$('#open-button').removeClass('open');
$('.loader').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
loadNewContent(url, bool);
$('.loader').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
});
if(!transitionsSupported()) loadNewContent(url, bool);
}
function loadNewContent(url, bool) {
url = ('' == url) ? 'index.html' : url;
var section = $('<div class="content-wrap"></div>');
//$.getScript('#page-script', function(){});
console.log(url);
section.load(url + ' .content-wrap > *', function(event){
$('.wrapper').html(section);
var delay = ( transitionsSupported() ) ? 1200 : 0;
setTimeout(function(){
$('body').removeClass('page-is-changing').remove('#page-script').load('#page-script');
$('.loader').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
isAnimating = false;
$('.loader').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
});
if( !transitionsSupported() ) isAnimating = false;
}, delay);
if(url!=window.location && bool){
window.history.pushState({path: url},'', url);
}
});
}
function transitionsSupported() {
return $('html').hasClass('csstransitions');
}
我想知道的是如何在完成loadNewContent函数时调用函数?我希望为每个页面中的内容添加动画效果,但是我需要等待内容加载直到内容加载。
谢谢! 杰西