javascript - Animasi elemen mengambang

Saya memiliki daftar elemen yang :

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

CSS untuk ini adalah :

display: inline-block;
width: 45px;
height: 45px;

Lalu tag ul adalah :

white-space: nowrap;

onClick Saya menambahkan kelas yang membuat elemen melayang ke kiri. Jadi semuanya dalam satu baris. onClick elemen apapun yang saya pilih melayang ke kiri (paling pertama di baris).

$('li').on('click', function() {
  $(this).toggleClass('left_align');
});

Ini adalah jsfiddle

Bagaimana caranya agar itu memindahkan elemen lain dan bergulir secara animasi.

Terima kasih!

Jawaban #1

Ada beberapa properti atau nilai yang ingin Anda transisikan, tetapi tidak didukung oleh browser. Daftar properti CSS yang dapat dianimasikan

float bukan properti css3 yang dapat dianimasikan.

Anda bisa mencoba tambalan ini:

    $('li').on('click', function() {
      $(this).toggleClass('left_align');
    });

li {
  display: inline-block;
  width: 45px;
  height: 45px;
  background: red;
  transition: 500ms ease-in-out;
}
li:hover {
  cursor: pointer;
}
.left_align {
  position: relative;
  margin-left: -5px;
  background: yellow;
  transition: 500ms ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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>

Biola di sini

Jawaban #2

Sayangnya Anda tidak bisa menggunakan CSS untuk menganimasikan properti float. Postingan SO berikut memiliki solusi menarik untuk masalah Anda: Javascript menganimasikan properti float CSS

Jika Anda masih ingin menganimasi dan tidak menggunakan float, Anda bisa mencoba menggunakan solusi dengan memanfaatkan margin. Untuk memperbaiki masalah jarak antara elemen daftar, Anda bisa menganimasi ke nilai margin negatif.

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

https://jsfiddle.net/37naqebd/