html隐藏块元素过度动画,如何在隐藏某些元素后使用css3过渡动画元素

一种方法是用占位符替换要移除的div，然后为占位符和原始位置设置动画。

您的代码可以改成这样的事情(我用在项目点击触发这里的去除)：

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

});

// 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

});

});

};

现在你的老格动画的方式进行，而电网崩溃。

如果您愿意将另一个库添加到您的代码中，请参阅Masonry/Isotope by Metafizzy。他们被设计来做这种事情。