用不同的计时功能转换x和y? [英] Translate x and y with a different timing functions?

问题描述

当前，我正在使用以下代码以相同的速度翻译x和y:

Currently I'm using the following code to translate both x and y at the same speed:

-webkit-transition:all 180ms ease-out;

我想平移X轴的速度比Y轴慢.是否可以指定类似于以下内容的东西:

I would like to translate the X axis slower than the Y. Is it possible to specify something similar to:

-webkit-transition:translateX 180ms ease-out;
-webkit-transition:translateY 50ms ease-out;

提前谢谢！

推荐答案

不幸的是，您不能对 transform 的不同部分使用不同的计时，因为它现在只是一个属性，无法进行拼接

Sad but true: you can't use different timings for different parts of transform since it's now only one property and cannot be spliced.

您唯一可以做的事情:

• 仅对一个轴使用 translate ，对另一轴使用定位(例如 top 或 left ).这样做可以附加不同的时间.
• 使用两个包装的块，因此您可以在它们上使用不同的 transform .这将需要更多代码，但是如果您需要GPU加速，将会很有帮助.

• Use translate only for one axis, and use the positioning for another (like top or left). Doing so you could attach different timings.
• Use two wrapped blocks, so you could use different transforms on them. It would take more code, but would be helpful if you'll need the GPU acceleration.

没有其他方法可以帮助我们:(

No other ways for us :(

这篇关于用不同的计时功能转换x和y?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！