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

Question

考虑到这个概念证明,是否可以通过JavaScript动画保留左边(负值和正值)？你会怎么做呢？

注意:我知道这只是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]
}

只要您的片段URL与要转换的元素的名称匹配,那么您应该能够使用JavaScript将片段推送到URL中,如果您仍然必须使用带有片段href的锚而不是转型发生了.如果您使用jQuery历史插件或自己推送和弹出历史堆栈,那么您仍然可以获得应用程序的后退按钮行为.

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


更新:这是一个证明以上内容的jsFiddle.它使用这个 jQuery历史插件来管理历史堆栈,这样你仍然可以从片段URL获得可接受的后退/前进按钮行为.anchor标签在其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设置关键帧.