Nasıl bazı elemanı

Question

saklandıktan sonra elemanlar css3 geçişlerle hareket animasyon uygulamak için?

Ancak benim durum daha şu şekildedir:

Ben çözümü here çeşit ("çok, o ızgaraları için çalışır" bölümüne bakın) bulundu 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> 

Ben div öğeleri yüzen var ve bazı unsurlar gizlendikten sonra, diğer öğeler animasyonlu olsa iyi olurdu. Mümkün mü?

Answer 1

jQuery'yi kullanmak yerine, aradığınız şeyi yapmak için küçük bir JavaScript ve CSS geçişleri tarafından değiştirilmiş bir CSS sınıfı kullanan something like this yapabilirsiniz.

// 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'); 
    } 
} 

Ben de senin düğmelerini çıkardı ve bir "arka tüm öğeleri Ekle" butonuna ekledi:

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

Zaten jQuery kullanıyorsanız başka bir yere projenizde ben de this jQuery version yaptı. İşte bunun için JavaScript'tir: Ayrıca

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

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

, bunların hiçbirini için kimliklerini gerekmez, eğer öyleyse onlar dışarı alınabilir bunu lütfen.

Answer 2

bir yaklaşım, daha sonra bir yer tutucu ile kaldırılacak div yerine tutucu ve orijinal olarak canlı olacaktır.

bu pasajı kullanarak: Positioning an element over another element with jQuery

Kodunuz (burada kaldırılmasını tetiklemek için öğenin üzerine tıklayın kullanılır) böyle bir şey değiştirilebilir

:

Demo

CSS

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

Senaryo

$('.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); 
}); 

Pasaj dan: ızgara çöker isePositioning 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 
    }); 
    }); 
}; 

Şimdi eski div dışına canlandırır. Eğer koduna başka kütüphane eklemek isteyen varsa

, Masonry/Isotope by Metafizzy bakabilirsiniz. Sadece böyle bir şey yapmak için tasarlanmışlardı.

Answer 3

Sen CSS-geçişler ihtiyacım yok.Bu tam olarak ne ihtiyaç yapar https://jsfiddle.net/st1o8ngp/