过渡固定位置元素的高度

Question

我有一个position: fixed;导航栏，我希望在点击超过0.2秒时扩展到浏览器的高度。

点击＆＃34;汉堡＆＃34;您可以看到所需效果的示例。在此页面上：http://iamwilliamstern.com/

示例/我尝试过的内容：

这是一个示例代码笔，我尝试这样做： http://codepen.io/donpinkus/pen/qaodzP

我在点击时添加了类.open，其中包含属性bottom: 0。底部是一个可动画的属性，但问题是我没有为它设置一个值来动画来自。我唯一的选择就是使用JS来计算bottom当它关闭＆＃34;时应该是什么？

我假设只有CSS选项才能保持顺畅。

Answer 1

将“已关闭”的div设为min-height: 1px

将“open”div设为min-height: 100%

由于您不手动设置height，因此“关闭”导航将从其内容中获取其高度，这比在CSS中手动设置高度更为理想。

示例： http://codepen.io/donpinkus/pen/amYvkL

div {
  background: red;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: all .2s ease-in-out;
  min-height: 20px; // This gets animated
}

.open {
  min-height: 100%;
}

Answer 2

而是更改底部属性为初始div添加高度，并使用100视口高度更改open类中的相同属性。

div {
  background: red;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: all .2s;
  height: 80px;

}

.open {
  height: 100vh;
}

Answer 3

您可以使用transform CSS属性移动菜单。

您需要将此菜单设为100%高度。

然后，在本演示中，我们将使用:target CSS伪类在用户单击锚点后设置菜单样式。如果您愿意，可以使用javascript切换类，只需更改选择器。

CODE SNIPPET：

＆＃13;

＆＃13;

.site__menu {
  background: red;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: transform .2s linear;
  transform: translateY(85%);
}
.site__menu:target {
  transform: translateY(0);
}

＆＃13;

<section id="menu" class="site__menu">
  <header class="site__header">
    <nav>
      <ul>
        <li>
          <a href="#menu">Click me to expand</a>
        </li>
      </ul>
    </nav>
  </header>
  <section>
    <h1>
   Hello!
  </h1>
    <p>
      Some content here.
    </p>
  </section>
</section>

＆＃13;

＆＃13;

＆＃13;

编辑：

由于header元素的高度可能会发生变化，因此很难设置transform值。

这就是为什么javascript将用于获取header高度并设置translateY()值。

使用calc() CSS函数进行直接计算。

transform: translateY(calc(containerHeight - headerHeight));

由于我们想要覆盖整个容器，我们使用：

transform: translateY(calc(100% - headerHeight));

演示示例：

transform: translateY(calc(100% - 76px));

＆＃13;

＆＃13;

var menu = $("#menu"),
  menuTrigger = $("#menu-trigger"),
  header = $(".site__header");

menuTrigger.on("click", function() {
  menu.toggleClass("open");
});

function getHeaderHeight() {
  var headerHeight = header.outerHeight(),
    result = headerHeight + "px";
  return result;
}

function transformMenu() {
  var translateValue = getHeaderHeight();
  menu.css("transform", "translateY(calc(100% - " + translateValue + "))");
}

transformMenu();

$(window).on("resize", function() {
  transformMenu();
});

＆＃13;

* {
  box-sizing: border-box;
}
.site__menu {
  background: dodgerblue;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: transform .2s linear;
  transform: translateY(100%);
}
/* Utility Class */

.site__menu.open {
  transform: translateY(0) !important;
}
.site__nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 1em;
}
.menu__toggle {
  cursor: pointer;
}
#spriteSheet {
  display: none;
}
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}
.icon-menu {
  color: white;
  font-size: 1.5em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<section id="menu" class="site__menu">
  <header class="site__header">
    <nav class="site__nav">
      <ul>
        <li>
          <img src="http://fillmurray.com/40/40" alt="Fill Murray Logo">
        </li>
        <li>
          <a id="menu-trigger" class="menu__toggle">
            <svg class="icon icon-menu">
              <use xlink:href="#icon-menu"></use>
            </svg>
          </a>
        </li>
      </ul>
    </nav>
  </header>
  <section>
    <h1>
   Hello!
  </h1>
    <p>
      Some content here.
    </p>
  </section>
</section>

<svg id="spriteSheet">
  <defs>
    <symbol id="icon-menu" viewBox="0 0 32 32">
      <title>menu</title>
      <path class="path1" d="M2 6h28v6h-28zM2 14h28v6h-28zM2 22h28v6h-28z"></path>
    </symbol>
  </defs>
</svg>

＆＃13;

＆＃13;

＆＃13;

  

没有jQuery库：

＆＃13;

＆＃13;

var menu = document.getElementById("menu"),
  menuTrigger = document.getElementById("menu-trigger"),
  header = document.querySelector(".site__header");

menuTrigger.addEventListener("click", function() {
  menu.classList.toggle("open");
});

function getHeaderHeight() {
  var headerHeight = header.offsetHeight + "px";
  result = headerHeight;
  return result;
}

function transformMenu() {
  var translateValue = getHeaderHeight();
  menu.style.transform = "translateY(calc(100% - " + translateValue + "))";
}

transformMenu();

window.addEventListener("resize", function() {
  transformMenu();
});

＆＃13;

* {
  box-sizing: border-box;
}
.site__menu {
  background: dodgerblue;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: transform .2s linear;
  transform: translateY(100%);
}
/* Utility Class */

.site__menu.open {
  transform: translateY(0) !important;
}
.site__nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 1em;
}
.menu__toggle {
  cursor: pointer;
}
#spriteSheet {
  display: none;
}
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}
.icon-menu {
  color: white;
  font-size: 1.5em;
}

＆＃13;

<section id="menu" class="site__menu">
  <header class="site__header">
    <nav class="site__nav">
      <ul>
        <li>
          <img src="http://fillmurray.com/40/40" alt="Fill Murray Logo">
        </li>
        <li>
          <a id="menu-trigger" class="menu__toggle">
            <svg class="icon icon-menu">
              <use xlink:href="#icon-menu"></use>
            </svg>
          </a>
        </li>
      </ul>
    </nav>
  </header>
  <section>
    <h1>
   Hello!
  </h1>
    <p>
      Some content here.
    </p>
  </section>
</section>

<svg id="spriteSheet">
  <defs>
    <symbol id="icon-menu" viewBox="0 0 32 32">
      <title>menu</title>
      <path class="path1" d="M2 6h28v6h-28zM2 14h28v6h-28zM2 22h28v6h-28z"></path>
    </symbol>
  </defs>
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 4

这是我的解决方案：使用min-height因为css高度不是“动画”

http://codepen.io/KykooBG/pen/amYvJE

div {
  background: red;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: all .2s ease-in-out;
  min-height: 15px;
}

.open {
  min-height: 100vh;
}