Est-il possible d’afficher simultanément les nouvelles et les anciennes pages?

J’essaie de créer un effet comme celui-ci pour smoothstate: http://tympanus.net/Development/PageTransitions/ , en particulier les transitions “room”.

Je ne peux plus essayer d’afficher les deux pages en même temps. Je veux que le nouveau contenu fasse disparaître l’ancien de l’écran.

beaucoup de code suit … tout fonctionne, mais il attend qu’après que l’ancien contenu soit hors écran pour commencer à append du nouveau contenu

$(function(){ 'use ssortingct'; 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'); }); 

J’aurais cependant onStart que changer la durée de onStart pour être plus court que la durée de l’animation fonctionnerait, mais cela coupe simplement l’animation, laissant un écran vide.

Je sais que $container est utilisé pour les deux, mais je pense pouvoir résoudre ce problème avec $container.clone(); pour conserver l’ancien contenu lorsqu’il quitte la page.

Ma question: y at-il un moyen d’accéder à $ newContent autrement que d’attendre la fin de onStart ?

Remarque: le même comportement se produit avec les animations CSS: elles se terminent à la fin de onStart .

    Oui. L’astuce consiste à utiliser setTimeout(,0) pour exécuter l’animation. J’ai fini par déplacer les animations dans une classe CSS pour plus de simplicité. Cela peut être lent sur de longues pages en raison de la duplication de contenu (facebook, youtube, etc.)

    Il revient immédiatement du gestionnaire onStart, mais exécute l’animation jusqu’à la fin. Il appelle onReady lorsqu’il est prêt et lance l’animation d’entrée.

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

    J’espère que vous en avez encore besoin. C’est comme ça que j’ai implémenté ceci:

     $(function () { //'use ssortingct'; 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 }