Как реализован счётчик лайков ВКонтакте?

#javascript #jquery #вконтакте

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

При этом в коде число 555 не разбивается на цифры, вставленные в div'ы или span'ы,
а отображается в блоке post_like_counter целиком.

Каким образом это реализовано? 
    

Ответы

Ответ 1

У вас вопрос построен на неверном предположении, что число не разбивается на цифры.

А оно разбивается.

Взгляните на DOM в момент перехода. Вот скриншот из Chrome Dev Tools посреди перехода
из 13 в 14.




counter_const для цифры 1, которая осталась неподвижной.
классы counter_anim_* для цифр 3 и 4, участвующих в анимации.


Как убедиться?

Chrome Dev Tools это штука довольно продвинутая.

Найдя элемент DOM, в котором должны произойти изменения, можно щёлкнуть на нём правой
кнопкой мыши и установить на нём "Break on" > "Subtree modifications". Тогда любые
изменения в этом поддереве приведут к останову всех процессов на странице и запуску
JS-отладчика (хотя в данном случае это вторично).