bogue de transition CSS

Question

J'ai cette paire de divs qui devrait redimensionner sur le clic, cela fonctionne bien sauf que de temps en temps le genre div clignote avant le redimensionnement. J'ai fait beaucoup de recherches et tout le monde est d'accord qu'il devrait corriger avec "-webkit-backface-visibility: hidden;" mais j'ai essayé et ça ne change rien. Il échoue à la fois en chrome et firefox. Je veux dire parfois ça marche bien et d'autres fois ça scintille vraiment horriblement.

Des idées sur ce qui ne va pas? Est-ce que c'est dans la jquery? dans le css?

Toute aide est appréciée.

Mes JS:

(function ($) {

setup = function setup(){ 
     var windowWidth;   

     $('.day').each(function(){ 

      var $this = $(this), 
       links = $('.links', $this), 
       images = $('.images', $this), 
       largeWidth, 
       smallWidth, 
       linksWidth, 
       imagesWidth; 



       images.click(function(){ 

        windowWidth = $(window).width(); 
        linksWidth = $('.links', $this).width(); 
        imagesWidth = $('.images', $this).width(); 

        largeWidth = Math.max(linksWidth,imagesWidth); 
        smallWidth = Math.min(linksWidth,imagesWidth); 

        if (windowWidth < 850){ 
         images.width(largeWidth); 
         links.width(smallWidth); 
        } 


       }) 

       links.click(function(){ 

        windowWidth = $(window).width(); 
        linksWidth = $('.links', $this).width(); 
        imagesWidth = $('.images', $this).width(); 

        largeWidth = Math.max(linksWidth,imagesWidth); 
        smallWidth = Math.min(linksWidth,imagesWidth); 

        if (windowWidth < 850){ 
         links.width(largeWidth); 
         images.width(smallWidth); 
        } 
       }) 


     }); 


} 

$(document).ready(setup); 

}(jQuery)) 

Et le CSS:

.column { 
    width: 50%; 
    float: left; 
    overflow: hidden; 
    -webkit-transition: width 0.3s linear; 
    -moz-transition: width 0.3s linear; 
    -o-transition: width 0.3s linear; 
    transition: width 0.3s linear; 

    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 

    -webkit-perspective: 1000; 
    -webkit-transform:translate3d(0,0,0); 
    -webkit-transform: translateZ(0); 
} 

Voici le jsFiddle: http://jsfiddle.net/cKvYq/2/

Merci un lot

Answer 1

La raison pour laquelle leurs largeurs commencent à s'animer de moins en moins est que vous définissez la largeur à modifier en fonction de la largeur actuelle. Ainsi, lorsque vous cliquez sur un objet pendant la transition, ces valeurs sont rejetées. Pour remédier à cela, vous pouvez essayer de calculer la largeur en fonction de la taille initiale de la fenêtre et du redimensionnement de la fenêtre, mais la méthode que j'ai utilisée est de désactiver les clics en utilisant .on et .off avec une durée de transition de setInterval.

L'autre problème de l'empilement droit div à la ligne suivante est causé par la largeur occupant temporairement plus que la largeur de la fenêtre. Je suppose que c'est parce que parfois les divs sont juste légèrement animés à des moments différents, ainsi l'un se dilate avant que l'autre ne le contracte à la ligne suivante. J'ai remédié à ce problème en diminuant la largeur de deux d'entre eux d'un couple de pixels et en utilisant une marge négative, astuce rembourrage accrue pour avoir le droit div appelé images pour occuper l'espace que j'ai enlevé. Cette partie pourrait probablement être faite d'une manière plus propre que je l'ai fait, comme inclure cette petite diminution dans le calcul initial quelque part ou peut-être dans le CSS, mais pour cette démo je ne pensais pas que c'était trop gros, fonctionne bien et a été fait pour vous montrer le problème

Here is the Updated jsFiddle

Voici le changement jQuery

(function ($) { 
    setup = function setup() { 
     var windowWidth; 
     $('.day').each(function() { 
      var $this = $(this), 
       links = $('.links', $this), 
       images = $('.images', $this), 
       largeWidth, 
       smallWidth, 
       linksWidth, 
       imagesWidth, 
       count = 0; 
      var imagesClick = function() { 
       images.off('click'); 
       links.off('click');     
       windowWidth = $(window).width(); 
       if(count === 0) 
       { 
        linksWidth = $('.links', $this).width() - 2; 
        imagesWidth = $('.images', $this).width() - 2; 
        images.css({'margin-right': "-=4", 'padding-right': "+=4"}); 
        count++; 
       } else{ 
        linksWidth = $('.links', $this).width(); 
        imagesWidth = $('.images', $this).width(); 
       }    
       largeWidth = Math.max(linksWidth, imagesWidth); 
       smallWidth = Math.min(linksWidth, imagesWidth); 
       if (windowWidth < 850) { 
        images.width(largeWidth); 
        links.width(smallWidth); 
        setTimeout(function() { 
         images.on('click', imagesClick); 
         links.on('click', linksClick); 
        }, 300); 
       } 
      } 
      images.on('click', imagesClick); 
      var linksClick = function() { 
       images.off('click'); 
       links.off('click'); 

       windowWidth = $(window).width(); 
       if(count === 0) 
       { 
        linksWidth = $('.links', $this).width() - 2; 
        imagesWidth = $('.images', $this).width() - 2; 
        images.css({'margin-right': "-=4", 'padding-right': "+=4"}); 
        count++; 
       } else{ 
        linksWidth = $('.links', $this).width(); 
        imagesWidth = $('.images', $this).width(); 
       } 

       largeWidth = Math.max(linksWidth, imagesWidth); 
       smallWidth = Math.min(linksWidth, imagesWidth); 

       if (windowWidth < 850) { 
        links.width(largeWidth); 
        images.width(smallWidth); 
        setTimeout(function() { 
         images.on('click', imagesClick); 
         links.on('click', linksClick); 
        }, 300); 
       } 
      } 
      links.on('click', linksClick); 
     }); 
    } 
    $(document).ready(setup); 
}(jQuery))