Как предотвратить анимацию только для последнего ребенка
У меня есть растущий список div. Пользователь может нажать кнопку, чтобы добавить новый 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>Как сделать так, чтобы анимация запускалась для всего списка в первый раз, но предотвращала ее при последующих добавлениях?
В идеале мне нужно поддерживать до IE11, мне не нужно поддерживать мобильные браузеры
Слава богу, нет :) Я имею в виду, что IE11 будет самым старым
Тогда я почти уверен, что ответ @AlvaroMontoro — это то, что вы ищете, поскольку это не ставит под угрозу поддержку браузера.
Ответы 2
Один вариант, немного меняющий JS и CSS:
Добавить класс к вновь добавленным элементам в список
d.className = "added";Примените анимацию только к
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>Хорошее решение, так как :not() не понадобятся другие версии браузера, тогда :last-child (при условии, что списки совместимости браузеров в Интернете верны), поэтому это не поставит под угрозу поддержку браузера, поэтому +1 за это.
How do I ensure the animation runs on the whole list the first time
Просто примените его ко всему списку
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>