Question

在条纹文档页面https://stripe.com/docs上，有人对我如何实现sidenav有任何想法吗？side nav具有嵌套的元素。我想知道如何单击主页上的“付款”，以打开付款方导航及其嵌套列表，并重定向到付款页面。我知道这没有任何意义，但是如果您单击docs页面并尝试，您可能会理解我正在尝试实现的目标。

Answer 1

您可以通过CSS高度转换实现类似的行为。它们在台式机上看起来很流畅（可以达到60fps，但不能在整个过渡期间内实现）。如果您需要更多控制权（例如，在打开other时关闭其他导航'ul'），则可以删除复选框元素并将标签元素更改为“ h2”。然后在JS代码中的“ h2”元素上设置“ onclick”侦听器，这会将类（样式从“ input：checked〜ul”添加到选定的“ ul”）。

:root {
  --liHeight: 1em
}

label {
  cursor: pointer
}

ul {
  opacity: 0;
  height: 0px;
  overflow: hidden;
  transition: 0.3s;
}

ul li {
  height: var(--liHeight);
}

input {
  position: absolute;
  opacity: 0;
}

input:checked ~ ul {
  opacity: 1;
  position: initial;
  height: calc(7 * var(--liHeight));
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="item">
    <label for="item1">
      Item 1
    </label>
    <input id="item1" type="checkbox"/>
    <ul>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
    </ul>
  </div>
  <div class="item">
    <label for="item2">
      Item 2
    </label>
    <input id="item2" type="checkbox"/>
    <ul>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
    </ul>
  </div>
  <div class="item">
    <label for="item3">
      Item 3
    </label>
    <input id="item3" type="checkbox"/>
    <ul>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
    </ul>
  </div>
</body>
</html>

另一种解决方案是编写JS动画，例如使用“ window.requestAnimationFrame” API来动画化“ ul”元素的高度。（我认为这正是stripe.com上正在发生的事情）

条纹文档样式sidenav with react

1 个答案: