Làm thế nào để animate các yếu tố di chuyển với chuyển tiếp css3 sau khi ẩn một số yếu tố

Question

Có thể animate các yếu tố di chuyển với chuyển tiếp css3 sau khi ẩn một số yếu tố bằng cách sử dụng jQuery .fadeOut()?

tôi tìm thấy một số loại dung dịch here (xem "Nó hoạt động cho lưới, quá" mục):

Tuy nhiên trường hợp của tôi là như thế này: 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> 

Tôi đã nổi phần tử div và sau khi một số phần tử bị ẩn, sẽ rất tuyệt nếu các phần tử khác được làm động. Có thể không?

Answer 1

Bạn có thể làm something like this sử dụng lớp CSS được bật lên bằng một quá trình chuyển đổi JavaScript và CSS nhỏ để thực hiện những gì bạn đang tìm kiếm thay vì sử dụng 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'); 
    } 
} 

Tôi cũng lấy ra các nút của bạn và thêm một "Thêm tất cả các yếu tố trở lại" nút:

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

Nếu bạn đã sử dụng jQuery ở một nơi khác trong dự án của bạn tôi cũng đã this jQuery version. Đây là JavaScript cho rằng:

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

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

Ngoài ra, bạn không cần ID cho bất kỳ điều này, để chúng có thể được lấy ra nếu bạn vui lòng.

Answer 2

Một cách tiếp cận sẽ là thay thế div để xóa bằng trình giữ chỗ, sau đó tạo hoạt ảnh cho cả trình giữ chỗ và phiên bản gốc.

Sử dụng đoạn mã này: Positioning an element over another element with jQuery

Mã của bạn có thể thay đổi một cái gì đó như thế này (tôi đã sử dụng nhấp chuột vào mục để kích hoạt việc loại bỏ ở đây):

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 từ: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 
    }); 
    }); 
}; 

Bây giờ div cũ của bạn sinh động ra khỏi con đường trong khi lưới sụp đổ.

Nếu bạn sẵn sàng thêm một thư viện khác vào mã của mình, hãy xem Masonry/Isotope by Metafizzy. Chúng được thiết kế để làm việc này.

Answer 3

Bạn không cần chuyển tiếp CSS.Chỉ cần sử dụng .hide() thay vì .fadeout()

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

Xem ở đây: https://jsfiddle.net/st1o8ngp/