Démarre les éléments flex de l'écran à l'animation en position

Question

Je n'arrive pas à trouver le meilleur moyen de faire fonctionner cette animation. J'ai deux éléments qui sont centrés verticalement à l'intérieur d'une disposition de flexbox, je veux obtenir ces éléments pour animer dans leurs positions finales en glissant hors de l'écran, cependant, cela semble me donner des résultats inattendus I assumer en raison de leur positionnement flexible. Des idées sur comment je peux y faire face?

Voici un plunker montrant l'état actuel des choses, j'ai ralenti l'animation afin que vous puissiez voir le dilemme et où j'essaye de prendre ceci.

.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

Lors de l'utilisation pour cent avec translate, ce sont les éléments propre taille, il fait référence, ce qui signifie que, si un élément est 200px élevé, translateY(100%) le déplace 200px (100% de son propre hauteur) vers le bas.

Dans ce cas, vous pouvez utiliser les unités de fenêtre d'affichage à la place, c'est-à-dire transform: translateY(100vh);, ce qui signifie qu'elle positionnera l'élément en bas de la fenêtre, quelle que soit sa hauteur.

Updated codepen