Анимировать элементы div последовательно с помощью CSS? - PullRequest
Новая
       11

Анимировать элементы div последовательно с помощью CSS?

0 голосов
/ 16 января 2019

У меня есть несколько div элементов, которые вложены в div с классом .menu; Идея состоит в том, чтобы последовательно перевести каждый элемент на страницу с внешних краев сверху вниз. Я думал, что смогу добиться этого с :nth-child(n), но по какой-то причине я не могу заставить его работать с позициями. У меня были переходы, работающие очень хорошо только с transition: 1s left/right. Тем не менее, я решил, что хочу получить задержку между каждым начальным переходом для достижения хорошего визуального эффекта. Я пошел в W3 Schools и изучил возможность использования animation CSS и решил, что мне нужно следующее: 

.menu div { position: relative; }
.menu:nth-child(0) {
    left: 60%;
    animation: 1s transitionLeft forwards;
}
.menu:nth-child(1) {
    right: 60%;
    animation: 1s transitionRight forwards;
    animation-delay: 0.5s;
}
@keyframes transitionLeft { 100% { left: 0; } }
@keyframes transitionRight { 100% { right: 0; } }

Я не верю, что это работает так, как я ожидаю, поскольку я вообще не получаю никакой анимации; это может иметь отношение к вложенности .main->div:a, div:a, …. Ниже приведен текущий код для этого: 

body {
  background-color: #222;
  color: #fff;
}
.menu {
  transition: 1s all;
  text-align: center;
  overflow: hidden;
  padding-bottom: 5%;
}
.menu > h1 {
  transition: 1s all;
  cursor: default;
  font-size: 10vw;
  margin: 2% 0 0 0;
}
.menu a {
  transition: 0.25s all;
  text-decoration: none;
  color: #fff;
  margin: 10px 0 10px 0;
  font-size: 3vw;
}
.menu div { position: relative; }
.menu div:nth-child(0) {
  left: 60%;
  animation-name: transitionLeft;
  animation: 1s transitionLeft forwards;
}
.menu div:nth-child(1) {
  right: 60%;
  animation: 1s transitionRight forwards;
  animation-delay: 0.5s;
}
@keyframes transitionLeft { 100% { left: 0; } }
@keyframes transitionRight { 100% { right: 0; } }
<div class="menu">
  <h1>Perpetual J Studios</h1>
  <div><a href="#">About</a></div>
  <div><a href="#">Contact</a></div>
  <div><a href="#">Games</a></div>
  <div><a href="#">Software</a></div>
  <div><a href="#">Apps</a></div>
  <div><a href="#">Academy</a></div>
</div>

Мне удалось заставить transition: 1s left/right работать на .main div:nth-child(odd/even), но не .main:nth-child(odd/even). Почему это так?

Основное внимание в этом вопросе уделяется тому, как правильно перенести мои элементы с внешних краев экрана в порядке L, R, L, R, L, R? Если вы хотите дать совет в своем ответе:

  • Каковы некоторые потенциальные Гоча с таким подходом?
    • Помимо того, что я использую кросс-браузерные теги, такие как webkit.
  • Что я должен подумать о таком поведении?

1 Ответ

0 голосов
/ 16 января 2019

Несколько замечаний:

  1. .menu:nth-child(1) будет искать элемент class="menu", который является самым первым дочерним элементом его родителя. Без вашего контекста я не могу сказать, существует ли это, но это, вероятно, не то, что вы хотите в этом случае.

  2. nth-child() начинается с 1, а не 0.

  3. div:nth-child(1) будет применяться только к элементам <div>, которые являются первыми дочерними элементами их родителей. Если вы посмотрите на свой HTML, ни один из ваших <div> элементов не будет первым потомком их родителя. Вместо этого вы можете начать с div:nth-child(2).

  4. Вы можете извлечь некоторые из обычных вещей и поместить их в nth-child(odd) и nth-child(even), чтобы избежать повторения.

Убирая это, вы можете посмотреть что-то вроде кода ниже. (Я сократил большую часть вашего CSS, чего не коснулся, просто чтобы было немного яснее, что я изменил) 

.menu,.menu>h1{transition:1s all}body{background-color:#222;color:#fff}.menu{text-align:center;overflow:hidden;padding-bottom:5%}.menu>h1{cursor:default;font-size:10vw;margin:2% 0 0}.menu a{transition:.25s all;text-decoration:none;color:#fff;margin:10px 0;font-size:3vw}.menu div{position:relative}@keyframes transitionLeft{100%{left:0}}@keyframes transitionRight{100%{right:0}}

.menu div:nth-child(odd) {       
  right: 60%;
  animation: 1s transitionRight forwards;
}

.menu div:nth-child(even) {
  left: 60%;
  animation: 1s transitionLeft forwards;
}

.menu div:nth-child(3) { animation-delay: 0.5s; }
.menu div:nth-child(4) { animation-delay: 1.0s; }
.menu div:nth-child(5) { animation-delay: 1.5s; }
.menu div:nth-child(6) { animation-delay: 2.0s; }
.menu div:nth-child(7) { animation-delay: 2.5s; }
<div class="menu">
  <h1>Perpetual J Studios</h1>
  <div><a href="#">About</a></div>
  <div><a href="#">Contact</a></div>
  <div><a href="#">Games</a></div>
  <div><a href="#">Software</a></div>
  <div><a href="#">Apps</a></div>
  <div><a href="#">Academy</a></div>
</div>
...