フレックス要素を画面外に移動してアニメーションを開始します

Question

このアニメーションをうまく動作させるにはどうすればよいかわかりません。

フレックスボックスレイアウトの内側に垂直に配置された2つの要素がありますが、これらの要素をオフスクリーンからスライドインすることで最終的な位置にアニメーション化したいのですが、これは私に予期しない結果をもたらしますフレックス位置決めのために仮定します。どのように私はこれに取り組むことができるかについての任意の考え？

ここでは、物事の現状を示すプランカーです。私はアニメーションを遅くして、ジレンマを見ることができます。そして、私はこれを取ろうとしています。

.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とパーセントを使用する場合、それはtranslateY(100%)はそれを独自の高さ200pxの（100％移動し、素子が高200pxのであれば、それは、を意味し、指す要素自体のサイズであります）ダウン。

この場合、ビューポート単位を使用することができます。つまり、transform: translateY(100vh);です。つまり、高さにかかわらず、要素をビューポートの下部に配置します。

Updated codepen