jQuery Girl
  1. jQuery Girl
  3. jQuery: élimine la “pause” à l’écran blanc entre les animations
Intereting Posts
Vidéo dans jQuery et Fancybox (fichier vidéo local mp4 au lieu de Youtube) jQuery GET ne lit pas les données de réponse HTML dans IE Comment afficher / masquer une div au passage de la souris? jQuery: Publication d’un caprice de tableau avec des crochets comment vérifier le mot de passe de confirmation dans le formulaire sans recharger la page jQuery – place tous les divs dans une div avec la classe “.container” Continuation de la différence de comptage entre deux nombres window.open avec la cible ‘_blank’ ouvre une nouvelle fenêtre de navigateur jQuery toggle () sans animation mais fonction complète? Comment garder le contenu de bootstrap popover après l’avoir caché, ou comment le cacher vraiment Passer un tableau sur une requête AJAX en utilisant js simple? Faire glisser une div dans jQuery – très bien lorsque la souris est lente, mais échoue lors d’un mouvement rapide Formulaire de dialog Jquery-Ui pour chaque bouton d’un tableau dynamic Surbrillance de l’arrière-plan du graphique dans HighChart Jquery mobile page de changement

jQuery: élimine la “pause” à l’écran blanc entre les animations

Je viens de découvrir Barba.js et le trouve très utile. Il fournit des transitions en douceur entre les URL du même site Web.

J’ai assemblé un Plunker composé de deux pages (index.html et about.html) qui se chargent en douceur, à l’aide des fadeIn() et fadeOut() de jQuery. 

 $(document).ready(function() { var transEffect = Barba.BaseTransition.extend({ start: function() { this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer))); }, fadeInNewcontent: function(nc) { nc.hide(); var _this = this; $(this.oldContainer).fadeOut(1000).promise().done(() => { nc.css('visibility', 'visible'); nc.fadeIn(1000, function() { _this.done(); }); $('html, body').animate({ scrollTop: 300 },1000); }); } }); Barba.Pjax.getTransition = function() { return transEffect; } Barba.Pjax.start(); });

Le problème avec ces animations est qu’il existe un intervalle d’écran blanc entre elles.

Comment pourrais-je éliminer cet intervalle pour faciliter la transition? Par “plus lisse”, j’entends semblable à celui-ci (cliquez sur “afficher le cas”) .

L’écran blanc correspond à la couleur de la carrosserie, car vous utilisez promise().done(..) fadeIn promise().done(..) jquery applique le fadeIn après la finition fadeOut pour que la couleur de la carrosserie apparaisse. Voici donc un exemple similaire à ce que vous avez:

Comme vous le voyez dans l’exemple ci-dessus, l’écran blanc apparaît également. Par conséquent, si vous ne le souhaitez pas, n’utilisez pas promise().done(..) . 

 $(document).ready(function(){ $('div.one').click(function(){ $(this).fadeOut(1000); $('div.Two').fadeIn(1000); }); });

vous pouvez éditer votre code comme ceci: 

 $(this.oldContainer).fadeOut(1000).promise().done(() => { $('html, body').animate({ scrollTop: 300 },1000); }); nc.css('visibility', 'visible'); nc.fadeIn(1000, function() { _this.done(); });

Pourquoi ne pas utiliser setTimeout() pour superposer le fondu enchaîné? Cela devrait l’empêcher de masquer complètement, ce que vous voulez éviter.

Vous pouvez essayer quelque chose comme ce qui suit: 

 $(document).ready(function() { var transEffect = Barba.BaseTransition.extend({ start: function() { this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer))); }, fadeInNewcontent: function(nc) { nc.hide(); var _this = this; // manipulate these values let fadeOutTime = 1000; let fadeInTime = 1000; let overlapTime = 100; $(this.oldContainer).fadeOut(fadeOutTime); // use setTimeout() to begin fadeIn before fadeOut is completely done setTimeout(function () { nc.css('visibility', 'visible'); nc.fadeIn(fadeInTime, function() { _this.done(); }); $('html, body').animate({ scrollTop: 300 }, fadeInTime); }, fadeOutTime - overlapTime) } }); Barba.Pjax.getTransition = function() { return transEffect; } Barba.Pjax.start(); });

NOTE: Ceci est juste un coup d’essai, le plunker est utile, mais il est difficile de voir l’animation en action.

METTRE À JOUR

Je pense que vous aurez besoin de quelque chose comme ce qui précède, mais si vous voulez faire un fondu en noir, alors vous voudrez aussi faire quelque chose comme créer un wrapper de div autour de tout votre contenu dans votre corps et donner à ce div le la couleur de fond de votre application, # eff3f6, puis le fond du corps est noir. Vous aurez du travail pour obtenir l’effet exact que vous désirez, mais quelque chose comme cela ou dans le lien SO dans les commentaires ci-dessous devrait vous aider.

Je suis sorti avec cette version du script: 

 $(function(){ var transEffect = Barba.BaseTransition.extend({ start: function() { this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer))); }, fadeInNewcontent: function(nc) { var _this = this; nc.css('visibility', 'visible'); nc.show().promise().done(() => { $(this.oldContainer).fadeOut(50); if (!isMobile.any()) { $('html, body').delay(100).animate({ scrollTop: 200 },700); } }); } }); Barba.Pjax.getTransition = function() { return transEffect; } Barba.Pjax.start(); });

C’est mieux, mais pas assez lisse. Voir l’effet sur un projet de la vie réelle . Comment puis-je l’améliorer?