动画onclick事件's显示:无

Animate onclick event's display:none

本文关键字：显示 onclick 事件 动画      更新时间：2023-09-26

我有一个div被按钮的onclick事件隐藏。当单击该按钮，div变为"display:none"时，下面的div会立即向上移动。有没有办法利用CSS3过渡来缓解这一行动？

谢谢！

使用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演示

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

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

相关文章：