Question

我有一个被按钮的onclick事件隐藏的div。当单击按钮，并且div转到“display：none”时，下面的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>

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

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

如果您有任何疑问，请在下方发表评论，我会尽快回复您。

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

动画onclick事件的显示：无

1 个答案: