如何使标题元素的宽度缓慢向左移

Posted 2023-02-25

我有一个汉堡包侧面菜单和标题元素，当我单击该汉堡包菜单时，我希望标题最初显示，并且标题的宽度慢慢向左增长，我该怎么做。

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>

以上是关于如何使标题元素的宽度缓慢向左移的主要内容，如果未能解决你的问题，请参考以下文章

Firefox：大型模糊元素的性能缓慢

我的应用程序在设备上运行缓慢是因为我使用的图像以及如何删除硬编码的宽度和高度

当用户将手从屏幕上移开时，如何使 Recycler View 滚动缓慢而流畅？

DELETE QUERY 第一次运行缓慢，但第二次（对于相同条件）运行快速 - 如何在第一次运行时使查询快速运行？

使本地存储计数缓慢上升

XML 作为虚拟注册表使应用程序运行缓慢