Come animare gli elementi si muovono con transizioni css3 dopo aver nascosto un elemento

Question

È possibile animare gli elementi spostare con transizioni css3 dopo aver nascosto un elemento usando jQuery's .fadeOut()?

ho trovato qualche tipo di soluzione here (vedi "Si lavora per le reti, anche" la sezione):

Tuttavia il mio caso è più simile a questo: 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> 

ho galleggiante elementi div e dopo che alcuni elementi sono nascosti, sarebbe bello se altri elementi fossero animati. È possibile?

Answer 1

Si potrebbe fare something like this che utilizza una classe CSS attivata da un po 'di JavaScript e transizioni CSS per fare ciò che stai cercando invece di usare 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'); 
    } 
} 

ho anche tirato fuori i pulsanti e aggiunto un pulsante "Aggiungi tutti gli elementi di nuovo":

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

Se stai già utilizzando jQuery da qualche altra parte nel progetto ho anche fatto this jQuery version. Ecco il JavaScript per questo:

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

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

Inoltre, non è necessario ID per tutto questo, in modo che possono essere prese se quindi per favore.

Answer 2

Un approccio sarebbe sostituire il div da rimuovere con un segnaposto, quindi animare sia il segnaposto che l'originale.

Utilizzando questo frammento: Positioning an element over another element with jQuery

Il codice può essere cambiato in qualcosa di simile a questo (io ho usato click sulla voce per attivare la rimozione qui):

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

Script

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

Snippet da: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 
    }); 
    }); 
}; 

Ora il vostro vecchio div anima fuori strada mentre la griglia crolla.

Se si desidera aggiungere un'altra libreria al proprio codice, dare un'occhiata a Masonry/Isotope by Metafizzy. Sono stati progettati per fare proprio questo genere di cose.

Answer 3

Non hai bisogno di transizioni CSS.Basta usare .hide() invece di .fadeout()

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

Vedi qui: https://jsfiddle.net/st1o8ngp/