Как предотвратить анимацию только на последнем ребенке - PullRequest
Новая
       25

Как предотвратить анимацию только на последнем ребенке

6 голосов
/ 27 июня 2019

У меня есть растущий список divs. Пользователь может нажать кнопку, чтобы добавить новый элемент div внизу.

Этот список имеет постепенную анимацию, чтобы пользователь мог видеть, когда список загружен (он получает данные с сервера).

Когда добавляется новая строка, я бы не хотел использовать анимацию постепенного появления.

Я пытался использовать: 

div:last-child {
  animation: none;
}

Это работает только при первом добавлении нового div. На всех следующих дополнениях анимация применяется независимо.

Пожалуйста, проверьте это демо ниже, чтобы понять, что я имею в виду: 

function addRow(text) {
  var d = document.createElement('div');
  d.innerHTML = text;
  var root = document.querySelector('main');
  root.appendChild(d);
}
body {
  background: #222;
}

main > div {
  background: #444;
  border: 1px solid green;
  animation: fade-in 1s;
}

div:last-child {
  background: #999;
  animation: none;
}

@keyframes fade-in {
  from { opacity: 0 }
  to { opacity: 1 }
}
<main>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</main>
<button type="button" onclick="addRow('hello')">Add row</button>

Как обеспечить, чтобы анимация запускалась по всему списку в первый раз, но предотвратить ее при последующих добавлениях?

Ответы [ 2 ]

4 голосов
/ 27 июня 2019

Один вариант, немного меняющий JS и CSS:

  1. Добавление класса для вновь добавленных элементов в список 

    d.className = "added";

  2. Примените анимацию только к div, который не имеет этого класса 

    main > div:not(.added) {
  animation: fade-in 1s;
}

Исходные div не имеют этого класса, поэтому они будут анимированнымикогда страница загружается, но div, которые добавляются позже (с указанным именем класса), не имеют никакой анимации.

Вот демонстрация того, как она будет основана на вашем коде: 

function addRow(text) {
  var d = document.createElement('div');
  d.className = "added";
  d.innerHTML = text;
  var root = document.querySelector('main');
  root.appendChild(d);
}
body {
  background: #222;
}

main > div {
  background: #444;
  border: 1px solid green;  
}

main > div:not(.added) {
  animation: fade-in 1s;
}

div.added:last-child {
  background: #999;
}

@keyframes fade-in {
  from { opacity: 0 }
  to { opacity: 1 }
}
<main>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</main>
<button type="button" onclick="addRow('hello')">Add row</button>
0 голосов
/ 28 июня 2019

Как убедиться, что анимация запускается по всему списку в первый раз

Просто примените его ко всему списку 

function addRow(text) {
  var d = document.createElement('div');
  d.innerHTML = text;
  var root = document.querySelector('main');
  root.appendChild(d);
}
body {
  background: #222;
}

main > div {
  background: #444;
  border: 1px solid green;
}
main {
  animation: fade-in 1s;
}

@keyframes fade-in {
  from { opacity: 0 }
  to { opacity: 1 }
}
<main>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</main>
<button type="button" onclick="addRow('hello')">Add row</button>
...