Javascript 设置浮动元素的动画

我有一个元素列表：

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
  <li>Element 4</li>
  <li>Element 5</li>
  <li>Element 6</li>
</ul>

那么ul标签是：

white-space: nowrap;

onClick

I添加一个类，将元素向左浮动。所以他们都排成一行了

onClick

我选择的任何元素都会向左浮动（在行的第一个）

我如何得到它，使它移动其他元素，并在各种动画上滚动

谢谢

有几个属性或值需要转换，但浏览器不支持

float

不是可设置动画的属性

您可以尝试此修补程序：

$（'li'）。在（'click'，function（）上{
$（this.toggleClass（'left_align'）；
});
li{
显示：内联块；
宽度：45px；
高度：45px；
背景：红色；
过渡：500ms缓进缓出；
}
李：悬停{
光标：指针；
}
.左对齐{
位置：相对位置；
左边距：-5px；
背景：黄色；
过渡：500ms缓进缓出；
}


要素1
要素2
要素3
要素4
要素5
要素6
不幸的是，您无法使用CSS设置浮点属性的动画。
以下文章对您的问题有一个有趣的解决方案：

如果仍要设置动画而不使用浮动，可以尝试使用使用边距的解决方案。要解决列表元素之间的间距问题，只需设置负边距值的动画即可

li {
    display: inline-block;
    width: 45px;
    height: 45px;
    background: red;
    transition: 2s ease-in-out;
    margin-left: 15px;
}
li:first-of-type {
   margin-left: 0;
}
li:hover {
  cursor: pointer;
}
.left_align {
  margin-left: -4px;;
  background: yellow;
  transition: 1s ease-in-out;
}

我在jQuery中找到的最简单的方法是对元素重新排序并调整它们的“左”css值（您必须从li元素中删除浮动，因为转换无法处理浮动）：

var lefts=[0,50100150200250]
对于（i=0；i选中此项
$('li').on('click', function() {
  $(this).toggleClass('left_align');
});

li {
    display: inline-block;
    width: 45px;
    height: 45px;
    background: red;
    transition: 2s ease-in-out;
    margin-left: 15px;
}
li:first-of-type {
   margin-left: 0;
}
li:hover {
  cursor: pointer;
}
.left_align {
  margin-left: -4px;;
  background: yellow;
  transition: 1s ease-in-out;
}

   var lefts = [0,50,100,150,200,250]
   for (i=0; i<6; i++) {
        $('li:nth-child('+(i+1)+')').css('left', lefts[i]);
   }

   $('li').on('click', function() {
        // reorder clicked element to move it to the top of the list
        $(this).insertBefore($('li:nth-child(1)')); 

        //update element left values
        for (i=0; i<6; i++) {
            $('li:nth-child('+(i+1)+')').css('left', lefts[i]);
        }
   });