动画 onclick 事件的显示：无答案

【问题标题】：Animate onclick event's display:none动画 onclick 事件的显示：无
【发布时间】：2015-05-27 05:33:49
【问题描述】：

我有一个被按钮的 onclick 事件隐藏的 div。当点击按钮时，div 变为“display: none”，下面的 div 立即在其位置“向上”移动。有什么方法可以使用 CSS3 过渡来简化此操作？

谢谢！

【问题讨论】：

请展示你的尝试（这样我们就不会犯同样的错误哈哈）
Roko，不幸的是，我所尝试的只是在 div 上使用基本的 CSS3 过渡，就像使用 :hover 选择器一样...这似乎不起作用。
display 属性不能转换/动画，原因很简单，它是“二进制”的——元素要么显示，要么不显示；没有任何“中间”。

【解决方案1】：

使用 CSS3 过渡时，您需要做的就是更改过渡集的样式。下面我有一个演示，它允许您让多个元素使用过渡。

function ClickEvents(){
  //Get toggle Elements By Class Name
var Boxes=document.getElementsByClassName('toggle');
//For each element found
    for(var i=0; i<Boxes.length; i++){
//Set the event listener
Boxes[i].addEventListener('click',Transition,false);    
    }
}
function Transition(){
//(This) the element clicked/used to call the function
    this.style.height='0px';
}
//Set onclick events.
window.onload=ClickEvents;

.toggle{
cursor:pointer;
height:150px;
width:150px;
overflow:hidden;
transition : height 550ms;
}
#Box1{background:blue;}
#Box2{background:red;}

<div id="Box1" class="toggle">Click Me</div>
<div id="Box2" class="toggle">Click Me</div>

编辑：我创建了另一个使用按钮触发切换的示例。

请记住，演示/示例供您扩展。 JSFiddle Demo

如果您有任何问题，请在下方留言，我会尽快回复您。

我希望这会有所帮助。快乐编码！

【讨论】：