Question

我正在寻找一种简单的方法来获取一个对象并转换其rotateY属性，而不会将其设置为其预设转换的动画。

看起来有点像：

$(this).css("-webkit-transform","rotateY(180deg)");
$(this).css("-webkit-transition","10s");

然后在代码中

$(this).css("-webkit-transform","rotateY(0)");
$(this).css("-webkit-transition","0");

但由于需要设置和重置过渡动画计时，上述内容对我来说并不适用。

我需要一个解决方案，只需将对象从a点到b点毫不费力。我似乎无法找到一种方法来设置rotateY属性，而无需通过转换/转换前缀。

任何帮助都会很棒，提前谢谢。

Answer 1

你需要的东西听起来像CSS3动画。

所以......在你的情况下，因为你希望动画在它的完成点，你的代码看起来像这样

$(this).css("-webkit-animation", "someanimation 10s forwards");

CSS3动画中的forwards属性可确保动画中的终点是永久渲染样式，因此动画将保持其结束状态，直到您卸载页面为止。

在CSS中，您必须添加

@-webkit-keyframes someanimation { <br />
    0% {-webkit-transform: rotateY(180deg);} <br />
    100% {-webkit-transform: rotateY(0deg);} <br />
}

以上代码并非特定于任何类或ID。这是它自己的部分。

以下是CSS3动画W3C Standard

的一些文档

这是一篇文章Smashing Mag

Answer 2

这就是你想要的 -

我添加了一个'S'并设置了border-right: 5px solid red，这样你就可以看到它实际上没有转换就回到了它的初始位置。实际上它带有转换，但在关键帧中我将特定的转换持续时间缩短到几毫秒（20毫秒），这样用户就不会认出并认为它很快就会回转。