使用 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 元素,在隐藏某些元素后,如果其他元素有动画效果那就太好了。可以吗?
您可以做类似这样的事情,它使用由一些 JavaScript 和 CSS 转换切换的 CSS 类来完成您想要的操作,而不是使用 jQuery。
// The relevant CSS
.item {
// Your original code here
transition: 0.5s ease-in-out;
}
.hide {
width: 0;
height: 0;
opacity: 0;
margin: 0;
padding: 0;
}
// The JavaScript
const items = document.getElementsByClassName('item');
for(let i = 0; i < items.length; i++) {
items[i].addEventListener("click", function() {
items[i].classList.toggle('hide');
});
};
function addBack() {
for(let i = 0; i < items.length; i++) {
items[i].classList.remove('hide');
}
}
我还拿出了你的按钮并添加了一个“添加所有元素回来”按钮:
<button onclick='addBack()'>Add all elements back</button>
如果您已经在项目中的其他地方使用了 jQuery,我还制作了 这个 jQuery 版本。这是 JavaScript:
function addBack() {
$('.item').each(function() {
$(this).removeClass('hide');
});
}
$('.item').on('click', function() {
$(this).toggleClass('hide');
});
此外,您不需要任何身份证件,因此如果您愿意,可以将其取出。
一种方法是用占位符替换要删除的 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);
});
// 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 转换。只需使用
.hide()
代替 .fadeout()
<button onclick="$('#item1').hide(400);">
Hide first
</button>