CSS3 फ्लोटिंग divs के लिए लेआउट परिवर्तन एनिमेट करें

Question

जैसे ही आप विंडो का आकार बदलते हैं, फ़्लोटिंग divs अपेक्षित के रूप में अगली पंक्ति में लपेट जाएंगे। लेकिन मैं वास्तव में एनिमेटेड होने के लिए इस लेआउट परिवर्तन पसंद करेंगे।

संपादित करें: एक तरफ, यह समाधान ढूंढना अच्छा लगेगा जो JQuery पर निर्भर नहीं है। अगर मुझे जरूरत है तो मुझे अपने स्वयं के जेएस लिखने पर कोई फर्क नहीं पड़ता। आदर्श रूप से मैं इसे एक एंगुलरजेएस निर्देश में लागू करना चाहता हूं, एक बार जब मैं इसे काम देखता हूं, इसलिए मुझे jQuery निर्भरता क्यों नहीं चाहिए।

यहाँ मेरी कोड का एक छोटा संस्करण है: http://jsfiddle.net/cDS7Q/3/

एचटीएमएल

<div id="content"> 

    <div>&nbsp;</div> 
    <div>&nbsp;</div> 
    <div>&nbsp;</div> 
    <div>&nbsp;</div> 
    <div>&nbsp;</div> 

</div> 

और यहाँ मेरी सीएसएस

body {background-color: #333;} 

#content div { 
    position: relative; 
    float: left; 
    background-color: #eee; 
    margin-left: 10px; 
    margin-bottom: 10px; 
    width: 100px; 
    height: 100px; 

    -webkit-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
} 

#content { 
    margin-top: 50px; 
    padding-top: $gutter; 
    padding-bottom: 50px; 
    overflow: hidden; 
    width: 100%; 
} 

प्रभाव मैं प्राप्त करने के लिए कोशिश कर रहा हूँ इस को similair है साइट: http://saffron-consultants.com/journal/

विंडो को आकार बदलें ब्लॉक को अपनी नई स्थिति में एनिमेट देखें।

Answer 1

आप इसके लिए त्वरित प्रयास कर सकते हैं। http://razorjack.net/quicksand/

Answer 2

सीएसएस के साथ यह संभव है, लेकिन केवल तभी जब आप मीडिया प्रश्नों के साथ पैरामीटर बदलते हैं।

उदाहरण के लिए:

आप, मीडिया क्वेरी वाले एक तत्व की चौड़ाई, या पैडिंग और मार्जिन को बदलते हैं की तुलना में आप एक एनीमेशन मिल जाएगा। इसके अलावा, यदि आप पूर्ण या रिश्तेदार divs को स्थिति देते हैं और मीडिया प्रश्नों में पदों को बदलते हैं तो यह काम करता है।

लेकिन साधारण फ़्लोटिंग/रैपिंग के साथ नहीं। इसके लिए आपको जावास्क्रिप्ट/jQuery की आवश्यकता होगी।

उदाहरण के लिए अपने बेला से जोड़ें:

body { 
    background-color: #333; 
} 

#content div { 
    position: relative; 
    float: left; 
    background-color: #eee; 
    margin-left: 20px; 
    margin-bottom: 20px; 
    width: 200px; 
    height: 200px; 

    -webkit-transition: all .7s ease; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .7s ease; 
    -o-transition: all .7s ease; 
    transition: all .7s ease; 
} 

#content { 
    margin-top: 50px; 
    padding-top: $gutter; 
    padding-bottom: 50px; 
    overflow: hidden; 
    width: 100%; 
} 

@media screen and (max-width: 480px) { 
#content div { 
    margin-left: 10px; 
    margin-bottom: 10px; 
    width: 100%; 
    height: 100px; 
    } 

}