我有一个汉堡包侧面菜单和标题元素,当我单击该汉堡包菜单时,我希望标题最初显示,并且标题的宽度慢慢向左增长,我该怎么做。
header {
width: 0px;
background-color: black;
padding-bottom: 10px;
display: none;
position: absolute;
}
.hamburger {
width: 20px;
background-color: black;
margin: 3px;
height: 3px;
top: 22px;
left: 100px;
}
<header>.</header>
<div id="main">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
</div>
当css transition宽度从header
变宽时,您可以使用0 to 100%
进行动画处理>
document.getElementById('main').onclick = function() { document.getElementById('header').classList.add('show'); }
html, body { padding: 0; margin: 0; } header { width: 0px; background-color: black; position: absolute; transition: all 0.5s; overflow: hidden; } header.show { width: 100%; } .hamburger { width: 20px; background-color: black; margin: 3px; height: 3px; top: 22px; left: 100px; }
<header id="header"> <div style="padding: 1em;"> header </div> </header> <div id="main"> <div class="hamburger"></div> <div class="hamburger"></div> <div class="hamburger"></div> </div>