Вопросы Теги

Как анимировать отдельные элементы списка?

Просто .split и .join: 

word_list = ' '.join(sentence).split(' ')
-1
задан Mr. Alien 14 March 2019 в 04:15
поделиться

1 ответ

Вместо использования position: absolute; необходимо использовать position: relative; 

#BeverlyWarbrick {
   position: relative;
}

Например: 

body {
  background-color: #000;
}

ul {
  margin: 0;
  padding: 0;
}

.women {
  margin-left: 10px;
}

.women ul li {
  font-family: serif;
  font-size: 3em;
  color: #fff;
  list-style: none;
}

.women div {
  position: relative;
  animation: 2s float-right ease-out forwards;
  left: -500px;
}

.women div:nth-of-type(2) {
  animation-delay: 1s;
}

@keyframes float-right {
  0% {
    left: -500px;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    left: -20px;
  }
  100% {
    left: 0px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="women">
  <ul>
    <div id="BeverlyWarbrick">
      <li>Beverly Warbrick</li>
    </div>
    <div id="MargaretNooski">
      <li>Margaret Nooski</li>
    </div>
  </ul>
</div>

Обратите внимание, что я удалил некоторый код из приведенного ниже фрагмента и сохранил его как минимум для демонстрационной цели.

Более того, способ написания CSS не является масштабируемым. Вы повторяете один и тот же CSS для каждого элемента. Вместо этого, рассмотрите возможность использования селекторов тегов, также рекомендуется использовать SASS для таких вещей, чтобы вы могли легко зациклить задержки для каждого элемента для анимации или вы можете использовать jQuery для добавления class к каждому из этих элементов с помощью задержка, а затем оживить их один за другим.

После вашего комментария я также добавил решение jQuery для задержки каждого из этих элементов. Например: 

let c = 0;
$(".women").find('div').each(function() {
  let elm = $(this);
  elm.css({
    'animation-delay': `${c}s`
  });

  c++;
});
body {
  background-color: #000;
}

ul {
  margin: 0;
  padding: 0;
}

.women {
  margin-left: 10px;
}

.women ul li {
  font-family: serif;
  font-size: 3em;
  color: #fff;
  list-style: none;
}

.women div {
  position: relative;
  animation: 2s float-right ease-out forwards;
  left: -500px;
}

@keyframes float-right {
  0% {
    left: -500px;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    left: -20px;
  }
  100% {
    left: 0px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="women">
  <ul>
    <div id="BeverlyWarbrick">
      <li>Beverly Warbrick</li>
    </div>
    <div id="MargaretNooski">
      <li>Margaret Nooski</li>
    </div>
  </ul>
</div>

Здесь я перебираю все div и добавляю задержку из 1s по сравнению с предыдущим div, так что эти элементы будут анимироваться один за другим. Обратите внимание, что я удалил animation-delay для 2-го div из CSS, в отличие от того, что у меня было в предыдущем решении, потому что теперь вам это больше не нужно.

0
ответ дан Mr. Alien 14 March 2019 в 04:15
поделиться