html - 使用转换构建抽屉

Question

在下面的代码笔中，我有一个抽屉，可以通过单击标题打开/关闭。其工作机制是一个 CSS 转换，它将抽屉内容设置为 translate3d(0, calc(-100% - 0.7em), 0);

关闭时。当前，抽屉下方的内容在隐藏时会被抽屉项的高度向下推。

我希望关闭的抽屉的高度是关闭时按钮的高度。

我做错了什么？

https://codepen.io/matthewp/pen/YRzjvP

Answer 1

只需将 h2 放入 .drawer div 并相应地调整 translate 的数量。

let drawer = document.querySelector('.drawer');
let btn = document.querySelector('#open-drawer');

btn.addEventListener('click', ev => {
  drawer.classList.toggle('open');
  btn.classList.toggle('open');
});

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

p {
  line-height: 1.5;
}

main {
  /* width: 800px; */
  margin: auto;
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-column-gap: 1em;
}

main > header {
  grid-column: 1 / 3;
  text-align: center;
}

aside {
  background-color: rgb(244, 245, 247);
  padding: 0.7em;
}

.display-drawer {
  display: block;
  justify-self: center;
  background-color: inherit;
}

.display-drawer h4 {
  margin: 0;
  text-align: left;
}

.items {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.items:first-of-type {
  margin-top: 0.8em;
}

.items li {
  margin-bottom: 0.2em;
}

.items li button {
  border: 0;
  font-size: 100%;
  font-family: inherit;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.3em;
  width: 100%;
  text-align: start;
}

.wrapper {
  background-color: inherit;
  overflow: hidden;
}

.counter {
  z-index: 2;
  position: relative;
  background-color: inherit;
}

button {
  border: 0;
  background: transparent;
  font-size: 100%;
  font-family: inherit;
  cursor: pointer;
  padding: 0.4em;
  width: 100%;

  display: flex;
  justify-content: space-between;
}

button:not(:focus-visible) {
  outline: none;
}

button .arrow {
  transition: 0.25s;
  transition-style: preserve-3d;
}

button .arrow:after {
  content: '⌃';
}

button.open .arrow {
  transform: rotateX(180deg);
}

.drawer {
  transition: transform .25s ease-out;
  transform: translate3d(0, calc(-100% + 2em), 0); /* changed size */
  z-index: 1;
  background-color: inherit;
}

.drawer.open {
  transform: translate3d(0, 0, 0);
}

hr {
  border: 3px solid #cfd3d7;
  margin: 0.7em 0;
}

.color-red button {
  background-color: red;
}

.color-green button {
  background-color: green;
}

.color-purple button {
  background-color: purple;
}

.color-magneta button {
  background-color: magenta;
}

.color-blue button {
  background-color: blue;
}

.color-yellow button {
  background-color: yellow;
}

.color-orange button {
  background-color: orange;
}

<main>
  <header>
    <h1>Some App</h1>
  </header>

  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquet massa quis ipsum faucibus, tincidunt euismod lectus posuere. Aenean bibendum nisi hendrerit tortor efficitur, ut luctus ex aliquet. Fusce auctor fermentum orci at elementum. Aliquam posuere vel quam vel pellentesque. Integer blandit, urna a tincidunt gravida, eros nisi condimentum neque, eget rutrum nisl lorem vel urna. Sed eget efficitur dui. Fusce quam mi, fermentum sit amet porta id, rhoncus a turpis. Duis vitae neque gravida, bibendum neque non, vehicula mi. Sed ornare nunc sed egestas faucibus. In a efficitur metus.</p>
    <p>Pellentesque consequat nec mi vitae tincidunt. Mauris cursus libero in massa dictum aliquam. Vestibulum faucibus dictum nunc, id consequat nisi fringilla sed. Pellentesque sed faucibus lectus. Nam tempus luctus consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis sit amet ligula a orci posuere volutpat non sit amet tellus. Aenean luctus ornare aliquet. Integer suscipit ornare sapien, nec interdum nibh fermentum molestie. Mauris blandit mauris at suscipit vehicula.</p>
  </div>

  <aside>
    <div class="display-drawer wrapper">
      <div class="counter">
        <button id="open-drawer" type="button">
          <h4 class="header">Colors</h4>
          <span class="arrow"></span>
        </button>
        <ul class="items selected">
          <li class="color-red">
            <button type="button">Red</button>
          </li>
          <li class="color-green">
            <button type="button">Green</button>
          </li>
        </ul>
      </div>
      <div class="drawer">
        <hr />
        <ul class="items unselected">
          <li class="color-blue">
            <button type="button">Blue</button>
          </li>
          <li class="color-purple">
            <button type="button">Purple</button>
          </li>
          <li class="color-magneta">
            <button type="button">Magneta</button>
          </li>
          <li class="color-yellow">
            <button type="button">Yellow</button>
          </li>
          <li class="color-orange">
            <button type="button">Orange</button>
          </li>
        </ul>
        <h2>Fruit</h2> <!-- changed position -->
      </div>
    </div>
  </aside>
</main>

请注意，我还在代码段中禁用了 main 的宽度，但这只是为了使其适合此处的窗口，而不必全屏显示。 (重要的更改标有注释。)