5

我有一个图像网格，我想用 css3 动画到顶部。它一直有效，直到我将 Background-size: 覆盖到网格上。动画变得断断续续。我做错了什么，或者我能做些什么来防止这种情况发生？

当我使用 jquery 的动画功能时，它变得更糟。

我还发现了类似的东西：-webkit-backface-visibility:hidden; 但这并不能解决问题。

示例：http: //jsfiddle.net/PqdVZ/

body{
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #ccc;
}

div.container.animate{
    top:-100%;
}
div.container{
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    -webkit-transition: top 1s ease-in-out;
    -moz-transition: top 1s ease-in-out;
    -o-transition: top 1s ease-in-out;
    -ms-transition: top 1s ease-in-out;
    transition: top 1s ease-in-out;

}

ul{
   display: block;
    padding: 0;
    margin: 0;
}

li{
    width: 25%;;
    float: left;
    height: 160px;
    background-size: cover;
    list-style: none;
    margin: 0;
    padding: 0;
}
4

1 回答 1

3

你的javascript没有问题，问题在于CSS。动画顶部、右侧、底部和左侧是硬件加速的。这很糟糕，因为它将在您的 CPU 上而不是在您的 GPU 上运行。当你看到一个不平稳的过渡时，你可以打赌你没有在硬件加速。因此，您应该使用硬件加速。

您应该为 transform(x, y, z) 设置动画，而不是为顶部设置动画。这将使其硬件加速。

所以你必须改变以下css：

div.container.animate{
    top:-100%;
}

div.container{
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    -webkit-transition: top 1s ease-in-out;
    -moz-transition: top 1s ease-in-out;
    -o-transition: top 1s ease-in-out;
    -ms-transition: top 1s ease-in-out;
    transition: top 1s ease-in-out;
}

进入这个：

div.container{
    float: left;
    width: 100%;
    height: 100%;

    -webkit-transform: translate3d(0, 0%, 0);
       -moz-transform: translate3d(0, 0%, 0);
        -ms-transform: translate3d(0, 0%, 0);
         -o-transform: translate3d(0, 0%, 0);
            transform: translate3d(0, 0%, 0);

    -webkit-transition: all 1s ease-in-out;
       -moz-transition: all 1s ease-in-out;
         -o-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
            transition: all 1s ease-in-out;
}

div.container.animate{
    -webkit-transform: translate3d(0, -100%, 0);
       -moz-transform: translate3d(0, -100%, 0);
        -ms-transform: translate3d(0, -100%, 0);
         -o-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
}

这是实时链接：http: //jsfiddle.net/PqdVZ/1/

于 2013-05-13T10:37:33.010 回答