Animacja pływającego elementu

Question

Mam listę elementów, które:

<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 dla nich są:

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

Następnie tag ul brzmi:

white-space: nowrap; 

onClick I dodaj klasę, która unosi lewy element. Więc wszyscy są z rzędu. onClick wybrany przeze mnie element pływa po lewej stronie (pierwszy z rzędu).

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

Here's the jsfiddle

Jak mogę to tak porusza inne elementy i zwoje całej rodzaju animowane.

Dzięki!

Answer 1

Istnieje kilka właściwości lub wartości, które chcesz przenieść, ale które nie są obsługiwane przez przeglądarki. List of animatable CSS properties

float nie jest css3 nieruchomość animatable.

Można spróbować tej poprawki:

$('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>

Fiddle here

Answer 2

Niestety nie można użyć CSS do animowania właściwości pływaka. Poniższy SO post ma ciekawe rozwiązanie swojego problemu: Javascript animate CSS float property

Jeśli nadal chcesz animować i nie używać pływaków, można spróbować użyć rozwiązania wykorzystującego marże. Aby rozwiązać problem odstępów między elementami list, możesz po prostu animować wartości ujemnych marginesów.

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/

Answer 3

Najprostszym sposobem znalazłem to zrobić w jQuery jest, aby zmienić kolejność elementów i dostosowanie ich wartości „left” css (masz do usunięcia pływaki z elementów li od przejścia przyzwyczajenie praca z pływakami):

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

jsfiddle here.