如何在隐藏一些元素后使用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屋！