21

我正在用 HTML 和 CSS3 制作一个滑出菜单——尤其是过渡。

我想知道水平滑动相对定位的 div 的最佳实践/最佳性能是什么。当我单击一个按钮时，它会向我的 div 添加一个类。哪个班更好？（请注意，我可以稍后添加所有浏览器前缀，并且该站点仅针对现代浏览器）。

//option 1
.animate{
    -webkit-transition:all ease 0.3s;
    -webkit-transform:translateZ(200px);
}

//option 2
.animate{
    -webkit-transition:all ease 0.3s;
    left:200px;
}

谢谢

4

2 回答 2

20

通过翻译转换在移动设备上的表现要好得多！

编辑：这是一个现场演示。translateX带有和的过渡比,和translateY平滑得多。 用于移动设备的 jsFiddle 演示topbottomleftright

于 2013-01-17T16:53:39.657 回答
3

translateX 和 translateY 比 left、right、top、bottom 和 jQuery 动画版本更流畅。有关演示的更详细信息，请参阅此内容：

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

于 2013-12-27T12:55:03.200 回答