CSS3 - 通过JavaScript实现margin-left属性的动画效果

Question

CSS3 - 通过JavaScript实现margin-left属性的动画效果

ioscsswebkitmobile-safari

12

考虑到这个概念证明，能否通过JavaScript实现对margin-left（包括负值和正值）的动画效果？如何实现？

注：我知道这只适用于WebKit。鉴于我是为iOS Safari开发，我没问题。

更新

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

- cllpse

我曾经为此制作了一个小插件，如果可能的话，它使用纯CSS3动画，否则它使用jQuery的本地animate函数：http://jsfiddle.net/WsR5s/12/（支持:animated选择器和.stop()函数）。 - meo

7个回答

8

您可以在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）

- Jordan Wallwork

5

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

- Lea Verou

1

这个只使用 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。

- Jacob M. Barnard

0

使用jQuery动画化CSS边距的方法如下：

$( '#mydiv' ).animate({

  'margin-left': 'new margin value'

});

- Jose Faeti

0

要使用 Webkit 的 CSS 动画，您需要创建一个具有 transform 属性的类，然后可以使用 jQuery 根据需要添加/删除该类。

- DA.

0

你可以使用jQuery的.animate()方法 - http://api.jquery.com/animate/

查看我的示例 - http://jsfiddle.net/ajthomascouk/jS83H/ - 点击加号和减号

- Alex

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Doug Stephen · Accepted Answer

我知道你特别提到了“你能用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);