javascript - 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 只是在不同的时间略有动画，因此一个在其他契约(Contract)将其扔到下一行之前展开。我通过将它们的宽度减少几个像素并使用负边距、增加填充技巧来让名为 images 的正确 div 占用我删除的空间来解决这个问题。这部分可能会以比我做的更简洁的方式完成，例如在某处或可能在 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))