Как реализовать анимацию появления нового сообщения?

Question

[Алексей Шаравин]

Здравствуйте. В соц. сети "ВКонтакте" при появлении нового сообщения (конкретно комментария) его фон подсвечивается синим цветом, а затем плавно переходит в белый (или исчезает). Подскажите, как подобное можно реализовать? На просторах интернета ничего не нашел, самому реализовать не получается.

Answer 1

[Aleksey Solovyev]

Что у Вас не получается?
1. Добавляете новый комментарий на страницу.
2. После N-секунд меняете фон комментария
https://jsfiddle.net/78wrnft3/7/

Если надо менять фон когда пользователь промотал до комментария, то отслеживайте появление элемента во вьюпорте.
1. Добавляете новый комментарий на страницу.
2. На событие onscroll проверять позицию нового комментария относительно позиции прокрутки:
Используйте плагин, если не понятно:
- https://github.com/camwiegert/in-view
- https://github.com/protonet/jquery.inview
- или куча других

// Пример с плагинов https://github.com/camwiegert/in-view
// Строки 10 - 14 в примере выше
inView('.newComment')
    .on('enter', function(){
         setTimeout(function() {
               newComment.classList.remove('new');
         }, 3000);
    })
});