jquery - 如何在隐藏某些元素后使用 css3 转换动画元素移动

Question

在使用 jQuery 的 .fadeOut() 隐藏某些元素后，是否可以通过 css3 转换为元素移动设置动画？

我找到了某种解决方案 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>

我有 float 的 div 元素，在一些元素被隐藏后，如果其他元素是动画的就更好了。可能吗？

Answer 1

你可以做 something like this它使用由少量 JavaScript 和 CSS 转换切换的 CSS 类来执行您正在寻找的操作，而不是使用 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 .这是用于此的 JavaScript:

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

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

此外，您不需要任何 ID，因此如果您愿意，可以将它们取出。