ios - CSS3 - 通过 JavaScript 为 margin-left 属性设置动画

Question

考虑到这个proof of concept , 是否可以通过 JavaScript 为 margin-left(负值和正值)设置动画？..你会怎么做？

注意:我知道这仅适用于 WebKit。我对此很好，因为我正在为 iOS Safari 开发。


更新

感谢您的回答，但 jQuery 的 animate 函数不支持纯 CSS 动画，而这正是我所需要的。

Answer 1

我知道您明确表示“您可以用 JavaScript 执行此操作吗”，但您不需要使用 JavaScript。我相当确定您链接到的概念证明仅使用 jQuery 作为使动画回退到 JavaScript 的方式，以便所有浏览器都能很好地播放动画。由于您是专门为 Mobile Safari 开发的，因此您不需要为此使用 jQuery，除非使用历史插件来推送和弹出状态以使浏览器的后退按钮起作用；这完全可以通过 CSS 过渡属性和 :target 伪选择器实现。

因此，作为替代方案，您应该能够执行以下操作:

在 HTML 中:

<div id="thing-that-will-transition">
    <a href="#thing-that-will-transition>click this to transition the div</a>
</div>

在 CSS 中:

#thing-that-will-transition
{
    (bunch of properties)
    -webkit-transition: margin-left [the rest of your transition values]
}

#thing-that-will-transition:target
{
    margin-left: [your properties]
}

只要您的片段 URL 与您要转换的元素的名称匹配，那么您应该能够使用 JavaScript 将片段推送到 URL，如果您绝对需要的话在仍然进行过渡的同时使用带有片段 href 的 anchor 。如果您使用 jQuery 历史记录插件或自行推送和弹出历史记录堆栈，那么您的应用程序仍会出现后退按钮行为。

我知道您特别要求使用 JavaScript 解决方案来触发 CSS 动画，但我不确定您为什么需要这个。抱歉，如果这对您没有帮助。


更新:Here's a jsFiddle demonstrating the above .它使用 this用于管理历史堆栈的 jQuery 历史插件，这样您仍然可以从片段 URL 中获得可接受的后退/前进按钮行为。 anchor 标记在其 onClick 中使用插件的“推送”或“加载”方法，并在 href 属性中使用标准片段作为未启用 JS 的浏览器的后备。


更新 2: Here's another jsFiddle使用转换/翻译而不是转换。


更新 3(通过 roosteronacid):

至于让动画通过 JavaScript，你可以这样做:

var element = document.getElementById("...");

setTimeout(function ()
{
    element.style.webkitTransitionDuration = "0.3s";
    element.style.webkitTransitionTimingFunction = "ease-out";
    element.style.webkitTransform = "translate3d(300px, 0, 0)";
}, 0);