考虑到这个概念证明,能否通过JavaScript实现对margin-left(包括负值和正值)的动画效果?如何实现?
注:我知道这只适用于WebKit。鉴于我是为iOS Safari开发,我没问题。
更新
感谢回答,但jQuery的animate函数不支持纯CSS动画,而这正是我需要的。
考虑到这个概念证明,能否通过JavaScript实现对margin-left(包括负值和正值)的动画效果?如何实现?
注:我知道这只适用于WebKit。鉴于我是为iOS Safari开发,我没问题。
更新
感谢回答,但jQuery的animate函数不支持纯CSS动画,而这正是我需要的。
:target
伪选择器实现。
因此,作为另一种选择,你应该能够像这样做:
在HTML中:
<div id="thing-that-will-transition">
<a href="#thing-that-will-transition>click this to transition the div</a>
</div>
#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]
}
var element = document.getElementById("...");
setTimeout(function ()
{
element.style.webkitTransitionDuration = "0.3s";
element.style.webkitTransitionTimingFunction = "ease-out";
element.style.webkitTransform = "translate3d(300px, 0, 0)";
}, 0);
translate3d()
? - cllpsetranslateX
,因为这是 margin 转换所使用的。如果你真的非常想使用 translate3d(),那么请将两个 -webkit-transform
定义替换为 webkit-transform: translate3d(yourValue, 0, 0)
。 - Doug Stephen.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");
var mleft = $(".MY_CLASS").css("margin-left");
var newleft = mleft.substr(0, mleft.length-2) + 50;
$('.MY_CLASS').css("margin-left", newleft+"px");
最好使用过渡效果,这几乎是跨浏览器支持的(除了IE),并通过JS设置关键帧。
这个只使用 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">占位文本</div>
来测试一下。 在Google Chrome 12.0.742.112和Safari 5.0.5(6533.21.1)中对我有效。 如果动画不会立即执行,可能是由于您的浏览器太快地处理翻译(或者是缓存?)。 您可以考虑以某种方式添加延迟。 我只是连续快速按了几次刷新按钮。 对我有用。
编辑: 查看 girliemac's 测试页面后面的源代码。 一些有见地的东西。 还请参阅此 SO post。
$( '#mydiv' ).animate({
'margin-left': 'new margin value'
});
你可以使用jQuery的.animate()
方法 - http://api.jquery.com/animate/
查看我的示例 - http://jsfiddle.net/ajthomascouk/jS83H/ - 点击加号和减号