Jak animować ruch elementów z przejściami css3 po ukryciu jakiegoś elementu?

Question

Czy można animować ruch elementów za pomocą przejść css3 po ukryciu jakiegoś elementu za pomocą jQuery's .fadeOut()?

znalazłem jakieś rozwiązanie here (patrz „To działa na sieci, zbyt” fragment):

Jednak mój przypadek jest bardziej jak to: 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> 

Mam pływających elementów div i po tym, jak jakiś element zostanie ukryty, byłoby miło, gdyby inne elementy były animowane. Czy to możliwe?

Answer 1

Możesz zrobić something like this, która używa klasy CSS przełączanej przez małe przejścia JavaScript i CSS, aby zrobić to, czego szukasz zamiast używać 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'); 
    } 
} 

Wziąłem też swoje przyciski oraz dodano przycisk „Dodaj wszystkie elementy z powrotem”:

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

Jeśli już przy użyciu jQuery gdzie indziej w projekcie I również this jQuery version. Oto JavaScript do tego:

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

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

Ponadto, nie potrzebujesz identyfikatorów do tego, więc mogą zostać usunięte, jeśli tak, proszę.

Answer 2

Jednym ze sposobów jest zastąpienie elementu div, który ma zostać usunięty, za pomocą symbolu zastępczego, a następnie animacja zarówno symbolu zastępczego, jak i oryginału.

Stosując ten fragment: Positioning an element over another element with jQuery

Twój kod można zmienić na coś takiego (użyłem kliknięcie na element, aby wywołać usuwanie tutaj):

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

Skrypt

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

Fragment z: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 
    }); 
    }); 
}; 

Teraz stary div animuje z drogi, natomiast siatka zapada.

Jeśli chcesz dodać inną bibliotekę do swojego kodu, spójrz na numer Masonry/Isotope by Metafizzy. Zostały zaprojektowane, by robić właśnie takie rzeczy.

Answer 3

Nie potrzebujesz przejść CSS.Wystarczy użyć .hide() zamiast .fadeout()

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

Zobacz tutaj: https://jsfiddle.net/st1o8ngp/