कुछ तत्व छिपाने के बाद तत्वों को एनिमेट करने के लिए css3 संक्रमणों को कैसे एनिमेट करें

Question

क्या jQuery के .fadeOut() का उपयोग करके कुछ तत्व छिपाने के बाद तत्वों को सीएसएस 3 संक्रमणों के साथ स्थानांतरित करना संभव है?

हालांकि मेरे मामले अधिक इस तरह है::

मैं कुछ (खंड देखें "यह ग्रिड के लिए काम करता है, भी") समाधान here की तरह पाया http://jsfiddle.net/CUzNx/5/

<div class="container"> 
    <div id="item1" class="item">Test1</div> 
    <div id="item2" class="item">Test2</div> 
    <div id="item3" class="item">Test3</div> 
    <div id="item4" class="item">Test4</div> 
    <div id="item5" class="item">Test5</div> 
    <div id="item6" class="item">Test6</div> 
    <div id="item7" class="item">Test7</div> 
</div> 

<div style="clear:both"> 
<button onclick="$('#item1').fadeOut();"> 
    Hide first 
</button> 
<button onclick="$('#item1').fadeIn();"> 
    Show first 
</button> 
</div> 

मैं div तत्वों चल है और कुछ तत्व छिपाने के बाद, यह अच्छा होगा अगर अन्य तत्व एनिमेटेड थे। क्या यह संभव है?

Answer 1

आप something like this कर सकते हैं जो एक छोटे से जावास्क्रिप्ट और सीएसएस संक्रमण द्वारा एक सीएसएस क्लास को टॉगल किया जाता है जो आप jQuery का उपयोग करने के बजाय खोज रहे हैं।

// The relevant CSS 
.item { 
    // Your original code here 
    -webkit-transition: all .5s ease-in-out; 
    -moz-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out; 
} 
.hide { 
    width: 0; 
    height: 0; 
    opacity: 0; 
    margin: 0; 
    padding: 0; 
} 

// The JavaScript 
var items = document.getElementsByClassName('item'); 
for(var i = 0; i < items.length; i ++) { 
    items[i].onclick = function() { 
     this.classList.toggle('hide'); 
    } 
}; 

function addBack() { 
    for(var i = 0; i < items.length; i ++) { 
     items[i].classList.remove('hide'); 
    } 
} 

मैं भी अपने बटन बाहर ले गई और एक "सभी तत्वों को वापस जोड़ें" बटन कहा:

<button onclick='addBack()'>Add all elements back</button> 

आप पहले से ही jQuery उपयोग कर रहे हैं कहीं और अपनी परियोजना में मैं भी this jQuery version बनाया है। यहाँ उस के लिए जावास्क्रिप्ट है: आप इस से किसी के लिए आईडी की जरूरत नहीं है, इसलिए वे अगर बाहर ले जाया जा सकता है

function addBack() { 
    $('.item').each(function() { 
     $(this).removeClass('hide'); 
    }); 
} 

$('.item').on('click', function() { 
    $(this).toggleClass('hide'); 
}); 

इसके अलावा, आप तो कृपया।

Answer 2

एक दृष्टिकोण प्लेसहोल्डर के साथ हटाए जाने के लिए div को प्रतिस्थापित करना होगा, फिर प्लेसहोल्डर और मूल दोनों को एनिमेट करें।

इस स्निपेट का उपयोग करना: Positioning an element over another element with jQuery

आपका कोड (मैं हटाने यहाँ गति प्रदान करने के मद पर क्लिक करते थे) कुछ इस तरह बदला जा सकता है:

Demo

सीएसएस

div { box-sizing: border-box; } 

.item, .placeholder { 
    float: left; 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
    margin: 5px; 
    position: relative; 
    background: white; 
    -webkit-transition: all 1s ease; 
} 

.placeholder { 
    opacity: 0; 
    border: 0px; 
} 

.item.hide { 
    border: 1px solid rgba(0,0,0,0); 
    margin: 0px; 
    top: 500px; 
    opacity: 0; 
    overflow: hidden; 
    z-index: -1; 
} 

.placeholder.hide { 
    width: 0; 
    height: 0; 
    margin: 0; 
    border: 0; 
} 

स्क्रिप्ट

$('.item').on('click', function(evt) { 
    var $this = $(this); 
    var $new = $($this.clone()); 

    $new.addClass('placeholder'); 
    $this.replaceWith($new); 

    $this.positionOn($new); 
    $this.appendTo($('body')); 

    setTimeout(function() { 
     $this.css({top: '', left: ''}); 
     $this.addClass('hide'); 
     $new.addClass('hide'); 
    }, 0); 
}); 

स्निपेट से:Positioning an element over another element with jQuery

// Reference: http://snippets.aktagon.com/snippets/310-positioning-an-element-over-another-element-with-jquery 
$.fn.positionOn = function(element, align) { 
    return this.each(function() { 
    var target = $(this); 
    var position = element.position(); 

    var x  = position.left; 
    var y  = position.top; 

    if(align == 'right') { 
     x -= (target.outerWidth() - element.outerWidth()); 
    } else if(align == 'center') { 
     x -= target.outerWidth()/2 - element.outerWidth()/2; 
    } 

    target.css({ 
     position: 'absolute', 
     zIndex: 5000, 
     top:  y, 
     left:  x 
    }); 
    }); 
}; 

अब अपने पुराने div रास्ते से बाहर एनिमेट जबकि ग्रिड गिर।

यदि आप अपने कोड में कोई अन्य लाइब्रेरी जोड़ने के इच्छुक हैं, तो Masonry/Isotope by Metafizzy पर एक नज़र डालें। वे इस तरह की चीज करने के लिए डिजाइन किए गए थे।

Answer 3

आपको सीएसएस-संक्रमण की आवश्यकता नहीं है।बस .fadeout()

<button onclick="$('#item1').hide(400);"> 
    Hide first 
</button> 

के बजाय .hide() का उपयोग यहाँ देखें: https://jsfiddle.net/st1o8ngp/