एक अस्थायी तत्व

Question

मैं तत्वों की सूची है एनिमेट कि:

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

इन के लिए सीएसएस हैं:

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

फिर उल टैग है:

white-space: nowrap; 

onClick मैं एक वर्ग जोड़ें जो तत्व को छोड़ देता है। तो वे सब एक पंक्ति में हैं। onClick जो भी तत्व मैं चुनता हूं वह बाईं ओर तैरता है (पंक्ति में पहले)।

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

Here's the jsfiddle

मैं इसे कैसे मिलता है तो यह एक तरह भर में अन्य तत्वों और स्क्रॉल ले जाता है एनिमेटेड की है।

धन्यवाद!

Answer 1

कई गुण या मूल्य हैं जिन्हें आप संक्रमण करना चाहते हैं, लेकिन जो ब्राउज़र द्वारा समर्थित नहीं हैं। List of animatable CSS properties

float एक css3 animatable संपत्ति नहीं है।

आप इस पैच की कोशिश कर सकते हैं:

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

दुर्भाग्य से आप नाव गुण चेतन करने के लिए सीएसएस का उपयोग नहीं कर सकते हैं। Javascript animate CSS float property

आप अभी भी चेतन और तैरता का उपयोग नहीं करना चाहते हैं, तो आप एक समाधान मार्जिन को रोजगार आज़मा सकते हैं: अतः निम्नलिखित पोस्ट आपकी समस्या के लिए एक दिलचस्प समाधान है। सूची तत्वों के बीच अंतर की समस्या को ठीक करने के लिए, आप केवल नकारात्मक मार्जिन मानों को एनिमेट कर सकते हैं।

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

सबसे आसान तरीका मैं jQuery में यह करने के लिए पाया तत्वों को पुन: व्यवस्थित और उनके 'छोड़' सीएसएस मान समायोजित (यदि आप अभ्यस्त संक्रमण के बाद से ली तत्वों से तैरता को दूर करने के लिए क्या है करने के लिए है फ्लोट के साथ काम करें):

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।