Question

我正面对Google Chrome中一个非常奇怪的错误。

这是我的代码

<div id="wrapper">
    <div class="trans">

    </div>
</div>

body {
    background:green;
    overflow: hidden;
}

.trans {
    width: 155550px;
    height: 200px;
    background: #000;
    position: relative;
    -webkit-transition-property:-webkit-transform, left, top;
    -webkit-transition-duration:0.600s;
    -webkit-transform:translate3d(0px,0,0);
    -webkit-transition-timing-function:ease-in-out;

}
#wrapper:hover .trans {
        -webkit-transform:translate3d(-155550px,0,0);
}

当您将鼠标悬停在包装div上并且转换开始时，背景会轻弹以显示透明区域。针对那个bug的任何解决方案？我在Win8上使用最新版本的谷歌浏览器

谢谢

更新这是我想要知道实际上正在制作什么的用户要实现的目标

http://jsfiddle.net/vpdpX/

Answer 1

这与你使用宽度为div的宽度相关。

我将把它实际上想要的div设置为页面宽度的100％，在这种情况下它可以工作。

jsFiddle

.trans {
    width: 100%;
    height: 200px;
    background: #000;
    position: relative;
    -webkit-transition-property:-webkit-transform, left, top;
    -webkit-transition-duration:0.600s;
    -webkit-transform:translate3d(0px,0,0);
    -webkit-transition-timing-function:ease-in-out;     
}

#wrapper:hover .trans {
        -webkit-transform:translate3d(-100%,0,0);
}

修改

为了实现这一点，我建议您在屏幕外动态添加和删除幻灯片，以免出现此问题。

Answer 2

首先，我会重新评估您尝试做什么以及您是如何尝试实现它的。鉴于提供的信息很难帮助太多 - 但你的div的宽度过大 - 任何应用于崩溃的动画几乎肯定不会正确地这样做。

那就是说，你使用了错误的动画类型和错误的属性 - 你只需要在宽度上添加一个过渡，然后在悬停时改变宽度。这适用于一个合理大小的div 你将只遇到一个宽155550px的问题

See fiddle

CSS

body {
    background:green;
    overflow: hidden;
}

.trans {
    width: 100%;
    height: 200px;
    background: #000;
    position: relative;
    transition: width 1s;
    -moz-transition: width 1s; /* Firefox 4 */
    -webkit-transition: width 1s; /* Safari and Chrome */
    -o-transition: width 1s; /* Opera */

}
#wrapper:hover .trans {
    width:0px;
}

Google Chrome奇怪的Css3 Transition Bug

2 个答案:

See fiddle