如何在隐藏一些元素后使用css3过渡动画元素 [英] How to animate elements move with css3 transitions after hiding some element
问题描述
使用jQuery的 .fadeOut()
?
隐藏某些元素后,是否可以使用css3过渡来动画元素p>我发现了一些解决方案这里(参见它适用于网格部分):
但是我的例子更像这样:
http://jsfiddle.net/CUzNx/5/
< div class =container>
< div id =item1class =item> Test1< / div>
< div id =item2class =item> Test2< / div>
< div id =item3class =item> Test3< / div>
< div id =item4class =item> Test4< / div>
< div id =item5class =item> Test5< / div>
< div id =item6class =item> Test6< / div>
< div id =item7class =item> Test7< / div>
< / div>
< div style =clear:both>
< button onclick =$('#item1')。fadeOut();>
隐藏首页
< / button>
< button onclick =$('#item1')。fadeIn();>
显示第一个
< / button>
< / div>
我有浮动div元素,一些元素被隐藏后,如果其他元素被动画, 。
您可以 类似这样的 ,它使用通过一些JavaScript和CSS转换来切换的CSS类,以便执行所需的操作,而不是使用jQuery。
//相关的CSS
.item {
//这里的原始代码
-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;
}
// JavaScript
var items = document.getElementsByClassName('item');
for(var i = 0; i< items.length; i ++){
items [i] .onclick = function(){
this.classList.toggle ');
}
};
function addBack(){
for(var i = 0; i< items.length; i ++){
items [i] .classList.remove('隐藏');
}
}
我也取出了你的按钮,并添加了一个所有元素返回按钮:
< button onclick ='addBack()'>添加所有元素< / button&
如果你已经在你的项目中使用jQuery了别的地方,我也做了 此jQuery版本 。这里是JavaScript的:
function addBack(){
$('。item')。 function(){
$(this).removeClass('hide');
});
}
$('。item')。on('click',function(){
$(this).toggleClass('hide');
});
此外,您不需要任何ID的ID,因此如果您所以请。
Is it possible to animate elements move with css3 transitions after hiding some element using jQuery's .fadeOut()
?
I found some kind of solution here (see "It works for grids, too" section):
However my case is more like this: 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>
I have floating div elements and after some element is hidden, it would be nice if other elements were animated. Is it possible?
You could do something like this which uses a CSS class toggled by a little JavaScript and CSS transitions to do what you're looking for instead of using 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');
}
}
I also took out your buttons and added an "Add all elements back" button:
<button onclick='addBack()'>Add all elements back</button>
If you're already using jQuery somewhere else in your project I also made this jQuery version. Here is the JavaScript for that:
function addBack() {
$('.item').each(function() {
$(this).removeClass('hide');
});
}
$('.item').on('click', function() {
$(this).toggleClass('hide');
});
Also, you don't need IDs for any of this, so they can be taken out if you so please.
这篇关于如何在隐藏一些元素后使用css3过渡动画元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!