css - 在屏幕外启动 flex 元素以动画到位

Question

我在弄清楚如何最好地让这个动画工作时遇到了一些麻烦。

我有两个元素在 flexbox 布局中垂直居中，我想让这些元素通过从屏幕外滑入来动画到它们的最终位置，但是，这似乎给了我一些我认为意想不到的结果因为他们的灵活定位。关于如何解决这个问题有什么想法吗？

这是一个显示事物当前状态的 plunker，我已经放慢了动画速度，以便您可以看到困境以及我正在努力解决的问题。

.scroller-item-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  overflow: hidden;
  .scroll-animator {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    flex-grow: 0;
    transform: translateY(100%);
    &:not(.pre-animated){
      animation-name: scrollItemIn;
      animation-duration: 1s;
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
      &:last-of-type {
        animation-delay: 1300ms;
      }
    }
    &.leaving {
      animation-name: scrollItemOut;
      animation-duration: .3s;
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
      transform: translateY(0%);
      &:last-of-type {
        animation-delay: 300ms;
      }
    }
    &:last-of-type {
      .scroller-item {
        margin-bottom: 0;
      }
    }
  }
  ...
}

https://plnkr.co/edit/MPyuTSjy2s5XWLk5EVVD?p=preview

Answer 1

将百分比与 translate 一起使用时，它是它所指的元素自身的大小，这意味着，如果一个元素是 200px 高，translateY(100%)会将其向下移动 200 像素(自高度度的 100%)。

在这种情况下，您可以改用视口(viewport)单位，即 transform: translateY(100vh); ，这意味着它会将元素定位在视口(viewport)的底部，无论其高度如何。

Updated codepen