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禁用点击次数。 a 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))

CSS转换错误

1 个答案: