@mrWan

Есть такой код: success: function(data) { $('#engine').html(data);} как сделать плавное появление блока?

Как видно выше, идет загрузка контента с помощью ajax.
  • Вопрос задан
  • 434 просмотра
Пригласить эксперта
Ответы на вопрос 2
@kulaeff
Front-end developer
Из вопроса не понятно, в каком состоянии находится блок #engine, но предположу, что он скрыт и после загрузки данных должен плавно появляться. В таком случае существует три варианта:
  1. использовать jQuery и его метод fadeIn()
  2. использовать другую либу для анимации, например, GSAP, Velocity и т.д.
  3. использовать CSS анимацию


Наиболее предпочтительным будет третий вариант, хотя бы потому, что не нужно перекладывать на JS то, что можно сделать средствами CSS. Суть этого варианта в том, что скрытый блок сначала показывается, а затем через минимальный промежуток времени анимируется его прозрачность. Такой хак делается потому, что свойство display нельзя анимировать.

Таким образом, имеем следующие стили:
#engine {
  display: none;
  opacity: 0;
}
#engine.active {
  display: block;
}
#engine.animate {
  opacity: 1;
  transition: opacity 1s linear;
}


Перед отправкой AJAX-запроса блок #engine скрыт и прозрачен. После того, как данные получены, присваиваем блоку класс .active. Он по-прежнему не видим, поскольку прозрачен. Далее, через минимальный промежуток времени (думаю хватит 10мс), присваиваем блоку класс animate, что приводит к плавному появлению блока. В коде это будет выглядеть так:

$.get(...)
  .success(function(data) {
    $('#engine').html(data);
    $('#engine').addClass('active').delay(10).queue(function() {
      $(this).addClass('animate').dequeue();
    })
  })


Пример
Ответ написан
Комментировать
ernesto77
@ernesto77
php, rb, py, js, webdev
без jquery)
var element = document.getElementById(id);
fade(element);
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы