Javascript动画CSS浮动属性

Javascript animate CSS float property

本文关键字：属性 CSS 动画 Javascript      更新时间：2023-09-26

我通过JavaScript添加了一个类，它使一个部分向右浮动，对于这个部分类，我想将浮动动画化到它的位置，但我无论如何都没有找到实现这一点的方法。有没有一种方法可以使用css3来设置浮动动画？

由于上述原因，单独使用CSS是不可能的。但看看Darcy Clark在这篇帖子上的回答：

http://www.quora.com/Is-there-a-way-in-jquery-to-animate-an-element-from-a-float-right-position-to-a-float-left-position

他链接到这把小提琴，似乎已经找到了答案：

http://jsfiddle.net/darcyclarke/m9pTN/

HTML

<div class="float right"></div>
<div class="float left"></div>

CSS

.float {
    background: red;
    width: 50px;
    height: 50px;
    margin: 0 10px;
    display: block;
    float: left; 
    clear: both;
}
.left {
    background: blue;
    float: right;  
}

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); 
    });
})();

我不知道这样做是否真的是个好主意。

使用CSS:

.float{
   position: absolute;
   right:0;
   transition: all 300ms ease;
}

你也可以使用

transform: translateX(100%);
transition: all 300ms ease;

不过，您必须为转换和转换添加供应商前缀。不需要JQuery，并且上面的答案不正确。

您可以在flex容器上编写转换，而不用考虑为float属性设置动画。

创建一个弹性容器，如下所示：

<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>

现在将animation属性应用于div.order1的宽度更改。隐藏div.order3并通过javascript将div.order1宽度更改为100%。

您将获得所需的动画。

***不检查上面的代码。我刚写完，请根据你的要求修改一下。

相关文章：