动画高度到视口底部

Question

使用重构更新（抱歉） 所以我试图在屏幕上的任何位置动画一个容器，动态数量的项目（溢出）到最后一个项目，或者如果视频空间比视口底部多，则视口底部。 （见例）。 如何编写动画来同时处理这两种情况？单独制作最大高度的动画太过于笨拙，因为它试图制作动画，好像它的动画总是达到最大高度。

小提琴是更好的例子。 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>