Поддержание позиционирования на мобильном телефоне / планшете (отзывчивый) - PullRequest
Новая
       14

Поддержание позиционирования на мобильном телефоне / планшете (отзывчивый)

0 голосов
/ 13 марта 2019

У меня есть CSS-анимация на 3 блоках (Flexboxes), которые переходят из-за экрана в положение с использованием преобразований, однако всякий раз, когда я изменяю размер окна, эти поля удаляются друг от друга и удаляются от их предполагаемого расположения (они должны быть перекрывание). Как сделать так, чтобы эти ящики оставались на месте? Или, если это невозможно, как я могу удалить преобразования, чтобы вернуть их обратно, оставаясь в пределах одного ряда, но расширяя всю ширину экрана?

index.scss 

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.container > div {
  width: 30vw;
  height: 80vh;
  box-sizing: border-box;
  border: solid 2px black;
  &:nth-child(1) {
    animation-name: scrollinRight;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    background: red;
  }
  &:nth-child(2) {
    animation-name: scrollinTop;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    background: rgb(120, 107, 133);
    z-index: 2;
  }

  &:nth-child(3) {
    animation-name: scrollinLeft;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    background: green;
  }
}

@keyframes scrollinRight {
  0% {
    transform: translateX(-100vh);
  }
  100% {
    transform: translateX(100vh);
  }
}

@keyframes scrollinLeft {
  0% {
    transform: translate(100vh, 100vh);
  }
  100% {
    transform: translate(-100vh, 10%);
  }
}

@keyframes scrollinTop {
  0% {
    transform: translateY(100vh);
  }
  100% {
    transform: translateY(5%);
  }
}

index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

1 Ответ

1 голос
/ 13 марта 2019

Вы можете попытаться использовать процент в ваших ключевых кадрах для translateX

DEMO 

@keyframes scrollinRight {
  0% {
    transform: translateX(-100vh);
  }
  100% {
    transform: translateX(150%);
  }
}

@keyframes scrollinLeft {
 0% {
    transform: translate(100vh, 100vh);
  }
  100% {
    transform: translate(-150%, 10%);
  }
}
...