CSS3 - 通过 JavaScript 动画 margin-left 属性

Question

考虑到这个概念证明 ，是否可以通过 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 的锚点。如果您使用 jQuery 历史插件或自己推送和弹出历史堆栈，那么您的应用程序仍然可以获得后退按钮行为。

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

更新：这是一个 jsFiddle 演示上述内容。它使用这个 jQuery历史插件来管理历史堆栈，这样你仍然可以获得可接受的后退/前进按钮来自片段 URL 的行为。锚标记在其 onClick 中使用插件的“push”或“load”方法，并在 href 属性中使用标准片段作为未启用 JS 的浏览器的后备。

更新2： 这是另一个使用变换/翻译而不是转换的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);

Answer 2

您可以在 css3 中设置过渡，然后对元素的后续更改将被动画化。

.MY_CLASS {
    -moz-transition: all 0.3s ease-out;  /* FF4+ */
    -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 0.3s ease-out;  /* IE10 */
    transition: all 0.3s ease-out;  
}

这指定了一个几乎跨浏览器（该死的IE）过渡，适用于所有CSS更改，持续0.3秒并缓和，因此它会在过渡结束时减慢速度。因此，要将其动画到左/右，只需更改 css：

$(".MY_CLASS").css("margin-left", "-300px");

请注意，这会将其动画到 300px 的固定位置，如果您想动画到相对于其当前位置的位置，请使用：

var mleft = $(".MY_CLASS").css("margin-left");
var newleft = mleft.substr(0, mleft.length-2) + 50;
$('.MY_CLASS').css("margin-left", newleft+"px");

在此处查看工作示例 (jsFiddle)

Answer 3

最好使用几乎跨浏览器支持的过渡（IE除外），并通过JS设置关键帧。

Answer 4

这仅适用于 CSS、HTML 和 WebKit：

#wrapper {
     width: 700px;
     text-align: left;
     border-radius:10px;
     -moz-border-radius:10px;
     border-style:solid;
     border-width:1px;
     border-color:#ccc;
     padding:30px 30px;
     -moz-box-shadow: 0px 0px 5px #BBB;
     -webkit-box-shadow: 0px 0px 5px #BBB;
     box-shadow: 0px 0px 5px #BBB;

     -webkit-transition-property: -webkit-transform, margin-left;
     -webkit-transition-duration: 3s;
     -webkit-transition-timing-function: ease-in;
     -webkit-transform: translate(100px);
}

只需在 HTML 文件中创建一个

Placeholder text

即可对其进行测试。在 Google Chrome 12.0.742.112 和 Safari 5.0.5 (6533.21.1) 中为我工作。如果它没有立即执行动画，可能是由于您的浏览器处理翻译的速度太快（或者可能是缓存？）。您可能会考虑以某种方式添加延迟。我只是快速地按了几次刷新按钮。为我工作。

编辑：
查看 girliemac 测试页面背后的源代码。那里有一些有见地的东西。另请参阅此SO帖子。

Answer 5

您可以使用 jqueries .animate() - http://api.jquery.com/ animate/

检查我的示例 - http://jsfiddle.net/ajthomascouk/jS83H/ - 按 + 和 -

Answer 6

使用 jQuery 动画 css 边距的工作方式如下：

$( '#mydiv' ).animate({

  'margin-left': 'new margin value'

});

Answer 7

要使用 webkit 的 css 动画，您需要创建一个具有 Transform 属性的类，然后您可以使用 jQuery 根据需要添加/删除所述类。