CSS3 как сделать затухание перегружаемого контента?

Question

[magary4]

как сделать эффект как здесь https://market.yandex.ru/catalog/54936/list?hid=43...
при чекании галочек
можно ли такого добится чисто одним ЦСС? как?
во время лоадинга блок получает класс loading а после загрузки класс убирается

Answer 1

[Андрей Федоров]

Логично что нельзя. Как вы класс добавите и уберете?

С классом - все просто:

.loading {
  opacity: 0;
  transition: opacity .5s
}

На js вам нужно добавить/удалить класс:

document.getElementById('id').classList.add('loading');
{Загрузка содержимого}
document.getElementById('id').classList.remove('loading');

UP: Да, я не учел, что при удалении loading transition тоже исчезнет. просто дайте transition: opacity .5s этому элементу вне зависимости от класса loading. Можно просто inline стиль добавить...

по второму вопросу. это возможно если появившаяся информация будет иметь свой фон. т.е.

<div style="background-image: url('loading.gif')">
<div style="transition: opacity .5s; background-color: #fff">
{контент}
</div>
</div>

Comments

[magary4]

>> во время лоадинга блок получает класс loading а после загрузки класс убирается
он уже добавляется и убирается. js уже есть

попробовал ваш пример, при добавлении класса контент затухает, но вот при ремуве класса, контент появляется моментально.

плюс когда класс добавлен нужно чтоб background: url('loading.gif') стал видимым вместо контента

[magary4]

>> контент появляется моментально.
надо чтоб появлялся с таким же эффектом

[Андрей Федоров]

magary4: Сюда код не вставляется, отредактировал ответ.

[magary4]

спасибо
все получилось