Question

由JQuery触发的简单的基于CSS转换的抽屉。移动Safari上的动画仍然不稳定，我认为除了实现像Green Sock这样的插件之外，解决方案是转换两个div转换为转换它们的行为。这甚至可能吗？

#touchmenucanvas {
    z-index:100;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    -webkit-transition:left .2s ease-in-out;
    -moz-transition:left .2s ease-in-out;
    -o-transition:left .2s ease-in-out;
    transition:left .2s ease-in-out;
    }

#touchmenudrawer {
    z-index:100;
    position:fixed;
    top:0;
    width:250px;
    height:100%;
    background:red;
    -webkit-transition:right .2s ease-in-out;
    -moz-transition:right .2s ease-in-out;
    -o-transition:right .2s ease-in-out;
    transition:right .2s ease-in-out;
    }

Answer 1

实施Green Sock的Tween不会对你有所帮助，因为CSS3过渡（截至今天）是动画元素的最有效方式（当然在现代浏览器中）。

但是，您可以使用一些技巧来提高性能，这就是硬件加速。 HA出现在Grapical Processing Unit（＆＃34; GPU＆＃34;）上并负责图形计算。这意味着CPU被释放并可以执行各种其他任务;例如，保持浏览器的美观和稳定。

并非每个浏览器都支持硬件加速，但它不会自动回退到CPU加速计算时（这很整洁）。

足够的历史课，让我们深入研究

我所说的是CSS3中的transform属性，确切地说是translate3d。在无布局元素（位置：绝对;例如）中使用它，它将平滑过渡。（你记得它加速了GPU吗？）。示例（注意浏览器兼容性）：

#touchmenudrawer {
    -webkit-transition: -webkit-transform .2s ease-in-out;
    -moz-transition: -moz-transform .2s ease-in-out;
    -o-transition: -o-transform .2s ease-in-out;
    -ms-transition: -ms-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
}

然后让我们说它向右移动100px：

#touchmenudrawer.toRight {
    -webkit-transform: translate3d(100px,0,0);
    -moz-transform: translate3d(100px,0,0);
    -o-transform: translate3d(100px,0,0);
    -ms-transform: translate3d(100px,0,0);
    transform: translate3d(100px,0,0);

请注意语法： x轴为100px，y轴为0，z轴为0。使用translate3d代替translate是我们可以执行的操作魔法。还有其他方法可以强制进行GPU加速变换（将Y旋转0度等），但这个是我最喜欢的，也很干净。

您可以使用此技术来达到预期效果。根据需要定位元素（左/右上/下等），然后通过更改它们的变换为它们设置动画。这在iOS上运行得非常好，很可能是解决您问题的方法。

但是，坚持下去，为网站上的所有元素写这个，这不是多余的吗？

是的，幸运的是，对我们来说，有一个图书馆可以为您排序最多。如果您使用的是jQuery，则可以使用jQuery transit，它基本上围绕$.animate()方法包装CSS3过渡。默认情况下，它不是GPU加速的，但如果您快速使用Google，则可以实现。

CSS3：如何将转换（方向）转换为转换？

1 个答案: