Question

考虑到这个proof of concept，是否可以通过JavaScript为margin-left（包括负值和正值）制作动画？..你会怎么做呢？

注意：我知道这只是WebKit。我很好，看到我正在为iOS Safari开发。

的更新

感谢您的回答，但jQuery的动画功能不支持纯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]
}

只要您的片段网址与您要转换的元素的名称相匹配，那么应该能够使用JavaScript将片段推送到URL中，如果您绝对需要使用具有片段href的锚同时仍然发生转换。如果您使用jQuery历史插件或自己推送和弹出历史堆栈，那么您仍然可以获得应用程序的后退按钮行为。

我知道你特意要求一个JavaScript解决方案来触发CSS动画，但我不确定为什么这就是你需要的。对不起，如果这对你没有帮助。

更新：Here's a jsFiddle demonstrating the above。它使用this jQuery历史插件来管理历史堆栈，这样您仍然可以从片段URL获得可接受的后退/前进按钮行为。 anchor标签在其onClick中使用插件的“push”或“load”方法，在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);

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");

See a working example here (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文件中创建<div id="wrapper">Placeholder text</div>即可对其进行测试。在Google Chrome 12.0.742.112和Safari 5.0.5（6533.21.1）中为我工作。如果它不立即执行动画，可能是由于您的浏览器处理翻译过快（或者缓存，也许？）。您可能会考虑以某种方式添加延迟。我只是快速按下刷新按钮几次。为我工作。

修改查看girliemac's测试页面背后的来源。那里有一些有见地的东西。另请参阅此SO post。

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添加/删除所述类。

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

7 个答案: