隐藏元素后，如何使用css3过渡动画元素
使用jQuery的.fadeOut()隐藏一些元素后，是否可以使用css3过渡动画元素移动？
我在这里找到了一些解决方案（参见“它也适用于网格”部分）：
不过我的情况更像是这样： http ： //jsfiddle.net/CUzNx/5/
Test1 Test2 Test3 Test4 Test5 Test6 Test7
我有浮动的div元素，并且在隐藏了一些元素之后，如果其他元素被动画化将是很好的。 可能吗？
你可以做这样的事情 ，它使用一个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'); } }
我还拿出了你的按钮并添加了“添加所有元素”按钮：
如果你已经在项目的其他地方使用了jQuery，我也制作了这个jQuery版本 。 这是JavaScript的代码：
function addBack() { $('.item').each(function() { $(this).removeClass('hide'); }); } $('.item').on('click', function() { $(this).toggleClass('hide'); });
此外，您不需要任何ID，因此如果您愿意，可以将它们取出。
一种方法是用占位符替换要删除的div，然后为占位符和原始动画添加动画。
使用此片段： 使用jQuery将元素定位在另一个元素上
您的代码可以更改为这样的代码（我在此处单击该项以触发删除）：
演示
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; }
脚本
$('.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来自： 使用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 }); }); };
现在，当网格崩溃时，您的旧div会移动。
如果您愿意在代码中添加另一个库，请查看Metafizzy的Masonry / Isotope 。 他们的目的只是为了做这件事。
你不需要CSS转换。 只需使用.fadeout()而不是.fadeout()
见这里： https ： //jsfiddle.net/st1o8ngp/