javascript - 动画 onclick 事件的显示 :none

Question

我有一个被按钮的 onclick 事件隐藏的 div。单击按钮时，div 变为“显示:无”，下面的 div 立即“向上”移动到它的位置。有什么方法可以使用 CSS3 转换来简化此操作吗？

谢谢!

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

Edit: I have created another example for using a button to trigger the toggle.

Remember, demos/examples are for you to expand on. JSFiddle Demo

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

希望对您有所帮助。编码愉快!