CSS转换错误

Question

我有这对应该调整点击的div，它可以很好地工作，除了每隔一段时间div类型在调整大小之前闪烁。我做了大量的研究，每个人都同意它应该修复“-webkit-backface-visibility：hidden;”但我已经尝试过了，并没有改变任何东西。它在Chrome和Firefox中都失败了。我的意思是有时候它可以正常工作，而其他时候它会非常可怕地闪烁。

有什么不对？ 它在jQuery中吗？在CSS？

任何帮助表示赞赏。

我的JS：

（函数（$）{

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)) 

而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); 
} 

这里是的jsfiddle：http://jsfiddle.net/cKvYq/2/

非常感谢

Answer 1

宽度开始动画的原因越来越少是因为您将宽度设置为基于当前宽度进行更改，因此当它在过渡时单击时，这些值将被丢弃。为了弥补这一点，您可以尝试根据窗口大小和窗口大小来计算大小宽度，但我推荐的方法是使用.on和.off以及setInterval转换的持续时间禁用点击。

正确的div换行到下一行的另一个问题是由临时占用的窗口宽度超过了宽度引起的。我认为这是因为有时div在不同的时间只是略微动画，因此在其他合约投掷到下一行之前就会扩展。我通过减少两个像素的宽度并使用负边距来弥补了这个问题，增加了填充技巧，让正确的div调用images来占据我删除的空间。这部分可能比我做得更干净，比如在初始计算中或者在CSS中包含了一些小的减少，但是对于这个演示，我没有认为它是一个太大的问题，它功能良好，是为了告诉你这个问题

Here is the Updated jsFiddle

这里是改变的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))