CSS CSS3 - 通过 JavaScript 动画 margin-left 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6442341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 - Animating margin-left property through JavaScript
提问by cllpse
Considering this proof of concept, would it be possible to animate margin-left (both negative and positive values) through JavaScript?.. And how would you go about doing so?
考虑到这个概念证明，是否可以通过 JavaScript 为 margin-left（负值和正值）设置动画？.. 你会怎么做？
Note: I know this is WebKit-only. And I'm fine with that, seeing as I am developing for iOS Safari.
Update
注意：我知道这是仅限 WebKit 的。我对此很好，因为我正在为 iOS Safari 开发。
更新
Thanks for the answers, but jQuery's animate function doesn't support pure CSS animations, which is what I need.
感谢您的回答，但 jQuery 的 animate 函数不支持纯 CSS 动画，这正是我所需要的。
回答by Doug Stephen
I know that you specifically say "can you do this in JavaScript", but you shouldn't need to use JavaScript. I'm fairly certain that the proof of concept you link to only uses jQuery as a way to make the animations fall back to JavaScript so that all browsers play nice with the animation. Since you're specifically developing for Mobile Safari, you shouldn't need to use jQuery for this except to use a history plugin to push and pop states to make the browser's back button work; this is entirely doable via CSS transition properties and the :targetpseudo-selector.
我知道你特别说“你能用 JavaScript 做这个吗”，但你不应该需要使用 JavaScript。我相当肯定您链接到的概念证明仅使用 jQuery 作为使动画回退到 JavaScript 的一种方式，以便所有浏览器都能很好地播放动画。由于您是专门为 Mobile Safari 开发的，因此您不需要为此使用 jQuery，除非使用历史插件来推送和弹出状态以使浏览器的后退按钮工作；这完全可以通过 CSS 过渡属性和:target伪选择器来实现。
So as an alternative, you should be able to do something like this:
因此，作为替代方案，您应该能够执行以下操作：
In HTML:
在 HTML 中：
<div id="thing-that-will-transition">
<a href="#thing-that-will-transition>click this to transition the div</a>
</div>
In CSS:
在 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]
}
As long as your fragment URL matches up with the name of the element that you want to transition then you shouldbe able to push the fragment in to the URL using JavaScript if you absolutely have to instead of using anchor with a fragment href while still having the transition take place. And if you use a jQuery history plugin or do your own pushing and popping of the history stack then you still get back-button behavior for your app.
只要您的片段 URL 与您要转换的元素的名称匹配，那么您应该能够使用 JavaScript 将片段推送到 URL 中，如果您绝对必须而不是使用带有片段 href 的锚点，同时仍然具有过渡发生。如果您使用 jQuery 历史插件或自己推送和弹出历史堆栈，那么您的应用程序仍然会获得后退按钮行为。
I know you specifically asked for a JavaScript solution to trigger the CSS animation, but I'm just not sure why this is what you need. Sorry if this doesn't help you at all.
UPDATE: Here's a jsFiddle demonstrating the above. It uses thisjQuery history plugin to manage the history stack, so that you can still get acceptable back/forward button behavior from the fragment URL's. The anchor tag uses the plugin's "push" or "load" method in its onClick with a standard fragment in the href attribute as a fallback for browsers without JS enabled.
UPDATE 2:Here's another jsFiddlethat uses transforms/translations instead of transitions.
UPDATE 3 (by roosteronacid):
我知道你特别要求一个 JavaScript 解决方案来触发 CSS 动画，但我不确定为什么这是你需要的。抱歉，如果这对您没有帮助。
更新：这是一个 jsFiddle 演示了上述内容。它使用这个jQuery 历史插件来管理历史堆栈，以便您仍然可以从片段 URL 中获得可接受的后退/前进按钮行为。锚标记在其 onClick 中使用插件的“push”或“load”方法，在 href 属性中使用标准片段作为未启用 JS 的浏览器的后备。
更新 2：这是另一个使用转换/翻译而不是转换的jsFiddle。
更新 3（由 roosteronacid）：
And as for getting the animations going through JavaScript, you can do:
至于让动画通过 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);
回答by Jordan Wallwork
You can set a transition in css3, and then subsequent changes to the element will be animated.
您可以在 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;
}
This specifies a nearlycross browser (damn IE) transition that applies to all css changes, lasts 0.3 seconds and eases, so it will slow down towards the end of the transition. Therefore, to animate it to the left/right, simply change the css:
这指定了一个几乎跨浏览器（该死的 IE）过渡，适用于所有 css 更改，持续 0.3 秒并缓动，因此它会在过渡结束时放慢速度。因此，要将其向左/向右设置动画，只需更改 css：
$(".MY_CLASS").css("margin-left", "-300px");
Note this will animate it to a fixed position of 300px, if you want to animate to a position relative to its current location use:
请注意，这会将其动画到 300 像素的固定位置，如果您想动画到相对于其当前位置的位置，请使用：
var mleft = $(".MY_CLASS").css("margin-left");
var newleft = mleft.substr(0, mleft.length-2) + 50;
$('.MY_CLASS').css("margin-left", newleft+"px");
回答by Lea Verou
Better use transitions, that are almost cross-browser supported (except IE), and set the keyframes through JS.
更好地使用几乎跨浏览器支持的过渡（IE 除外），并通过 JS 设置关键帧。
回答by Jacob Barnard
This works using CSS, HTML and WebKit only:
这仅适用于 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);
}
Just make a <div id="wrapper">Placeholder text</div>in an HTML file to test it out. Worked for me in Google Chrome 12.0.742.112 and Safari 5.0.5 (6533.21.1). If it doesn't do the animation right away, it may be due to your browser processing the translation too quickly (or caching, perhaps?). You might consider adding a delay somehow. I just pressed the refresh button a few times really fast. Worked for me.
只需<div id="wrapper">Placeholder text</div>在 HTML 文件中创建一个来测试它。在 Google Chrome 12.0.742.112 和 Safari 5.0.5 (6533.21.1) 中为我工作。如果它没有立即执行动画，可能是由于您的浏览器处理翻译过快（或缓存，也许？）。您可能会考虑以某种方式添加延迟。我只是快速按下刷新按钮几次。为我工作。
Edit:Check out the source behind girliemac'stest page. Some insightful stuff there. Also see this SO post.
回答by Alex
you can use jqueries .animate()- http://api.jquery.com/animate/
您可以使用 jquery .animate()- http://api.jquery.com/animate/
Check my example - http://jsfiddle.net/ajthomascouk/jS83H/- Press the + and -
检查我的例子 - http://jsfiddle.net/ajthomascouk/jS83H/- 按 + 和 -
回答by Jose Faeti
Animating css margins with jQuery works like this:
使用 jQuery 动画 css 边距的工作方式如下：
$( '#mydiv' ).animate({
'margin-left': 'new margin value'
});
回答by DA.
To use webkit's css animations, you'd create a class that has the transform property, then you can use jQuery to add/remove said class as needed.
要使用 webkit 的 css 动画，您需要创建一个具有 transform 属性的类，然后您可以根据需要使用 jQuery 添加/删除所述类。
