javascript - 将高度设置为视口(viewport)底部的动画

Question

重构更新(抱歉)因此，我正在尝试为一个容器制作动画，该容器可以在屏幕上的任何位置使用动态数量的元素(溢出)到最后一个元素，或者如果元素多于视口(viewport)空间，则视口(viewport)底部。 (见示例)。我如何编写动画来同时处理这两种情况？单独设置最大高度的动画太简陋了，因为它试图设置动画，就好像它总是在设置最大高度的动画一样。

Fiddle 是更好的例子。 https://jsfiddle.net/h9kuzfay/26/

#d {
  display: flex;
  flex-direction: column;
  display: inline-block;
  height: 100vh;
  margin: 0;
  vertical-align: top;
}

.container {
  margin-top:20px;
  padding: 10px;
  max-height: 50px;
  overflow: hidden;
  background-color: gray;
  width: 250px;
  animation: height-to-vp 0.5s ease forwards;
}

.item {
  height: 16px;
}

@keyframes height-to-vp {
  from {
    max-height: 100px;
  }
  to {
    max-height: 100vh;
  }
}

#d2 {
  display: flex;
  flex-direction: column;
  display: inline-block;
  height: 100vh;
  margin: 0;
  vertical-align: top;
}


.container2 {
  margin-top:20px;
  padding: 10px;
  overflow: hidden;
  background-color: gray;
  width: 250px;
  animation: height-to-vp 0.5s ease forwards;
}

@keyframes height-to-vp2 {
  from {
    flex: 0;
  }
  to {
    flex: 1;
  }
}

<div id="d">
  <div class="container">
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
  </div>

  <div class="bottom-content">
    <button>Should animate up to last item</button>
  </div>
</div>

<div id="d2">
  <div class="container2">
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
  </div>

  <div class="bottom-content">
    <button>
      Should stay in viewport
    </button>
  </div>
</div>

Answer 1

您可以使用 flex 并结合最大高度动画以在开始时仅显示几个元素:

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}

.container {
  margin-top:20px;
  padding:10px;
  background-color: gray;
  width: 250px;
  max-height:50px;
  overflow:auto;
  animation: height-to-vp 3s ease 1s forwards;
}

@keyframes height-to-vp {
  from {
    flex: 1;
    max-height:50px;
  }
  to {
    flex: 1;
    max-height:100vh;
  }
}

<div class="container">
  <div class="item">
    Hello
  </div>
  <div class="item">
    Hello
  </div>
  <div class="item">
    Hello
  </div>
    <div class="item">
    Hello
  </div>
  <div class="item">
    Hello
  </div>
</div>



<div class="bottom-content">
  <button>Should remain in viewport</button>
</div>