Javascript 动画 CSS 浮动属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23235894/
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
Javascript animate CSS float property
提问by user2019420
I have a class added via JavaScript which makes a section float right and for this section class I want to animate the floating into it's position, however I have not found anyway to make this work. Is there a way to use css3 to animate floating?
我通过 JavaScript 添加了一个类，它使一个部分向右浮动，对于这个部分类，我想将浮动动画化到它的位置，但无论如何我还没有找到使这个工作。有没有办法使用css3来制作浮动动画？
回答by rjgrazioli
It isn't possible using CSS alone for the reason's stated above. But check out Darcy Clark's answer on this post:
由于上述原因，单独使用 CSS 是不可能的。但请查看 Darcy Clark 在这篇文章中的回答：
He links to this fiddle and seems to have figured it out:
他链接到这个小提琴，似乎已经弄清楚了：
http://jsfiddle.net/darcyclarke/m9pTN/
http://jsfiddle.net/darcyclarke/m9pTN/
HTML
HTML
<div class="float right"></div>
<div class="float left"></div>
CSS
CSS
.float {
background: red;
width: 50px;
height: 50px;
margin: 0 10px;
display: block;
float: left;
clear: both;
}
.left {
background: blue;
float: right;
}
JS
JS
(function(){
var $plugin = jQuery.sub();
$plugin.fn.animate = function(props, speed, cb){
if(typeof(speed) == "function")
cb = speed, speed = 500;
if(typeof(cb) != "function")
cb = function(){};
return $.each(this, function(i, el){
el = $(el);
if(props.float && props.float != el.css("float")){
var elem = el.clone().css(props).insertBefore(el),
temp = (props.float == el.css("float")) ? elem.position().left : el.position().left;
props.marginLeft = elem.position().left;
elem.remove();
el.css({float:"left",marginLeft:temp});
}
$(this).animate(props, speed, function(){
$(this).css(props);
cb();
});
});
};
$(".float.right").bind("click", function(){
$plugin(this).animate({float:"right"}, 1000);
});
$(".float.left").bind("click", function(){
$plugin(this).animate({float:"left"}, 1000);
});
})();
I can't speak to whether or not doing this is actually a good idea.
我无法确定这样做是否真的是一个好主意。
回答by Christian Landgren
Use CSS:
使用 CSS：
.float{
position: absolute;
right:0;
transition: all 300ms ease;
}
You can also use
你也可以使用
transform: translateX(100%);
transition: all 300ms ease;
You'll have to add the vendor prefixes for transform and transition though. No JQuery needed and the answers above are not correct.
不过，您必须为转换和转换添加供应商前缀。不需要 JQuery，上面的答案不正确。
回答by RiksAndroid
Instead of thinking about animating float property, you can write transition on flex container.
您可以在 flex 容器上编写转换，而不是考虑为浮动属性设置动画。
Create a flex container like below:
创建一个弹性容器，如下所示：
<div class="main-div" style="display:flex; transition: width 2s">
<div id="child1" style="order: 1 width: 10%"></div>
<div id="child2" style="order: 2"></div>
<div id="child3" style="order: 3"></div>
</div>
<button>Change width of child1</button>
<script>
$('document').ready(function() {
$('button').on('click', function(){
$('#child1').width(100%);
$('#child3').hide(1000);
});
});
</script>
Now apply animation property on width change of div.order1. Hide div.order3 and change div.order1 width to 100% via javascript.
现在在 div.order1 的宽度变化上应用动画属性。隐藏 div.order3 并通过 javascript 将 div.order1 宽度更改为 100%。
You will get your desired animation.
你会得到你想要的动画。
*** code above is not checked. I have just written it. So, please modify it according your requirement.
*** 上面的代码没有被检查。我刚刚写了它。所以，请根据您的要求修改它。
