jquery – 隐藏元素后,如何使用css3过渡动画元素

使用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>

我有浮动的div元素,并且在隐藏了一些元素之后,如果其他元素被动画化将是很好的.可能吗？

解决方法

你可以做 something like this,它使用一个CSS类来切换一些JavaScript和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,因此如果您愿意,可以将它们取出.