4

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

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

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

7
  • Пример нужен. А по описанию сложно сказать, разве что вероятно на margin закручено.
    – user31688
    13 мая 2015 в 10:44
  • Скорее всего, оно разбивается, просто впоследствие лишние элементы удаляются.
    – etki
    13 мая 2015 в 11:08
  • 2
    возможно число разбивается при клике, а потом возвращается в прежний блок, или же вычисляется новое значение счетчика, и вычисляется число изсменяемых символов, вставляется в бло, который наплывает на текущий, в конце анимации блок удаляется а в post_like_counter просто отображается число.
    – OlegUP
    13 мая 2015 в 11:35
  • По-моему тебе нужно ajax. 13 мая 2015 в 15:04
  • 8
    Ещё как разбивается. Вот как выглядит разметка посреди анимации 13 -> 14. Можете проверить сами, повесив в Хроме на контейнер с числом "Break on > Subtree modifications". Заодно и связанный код увидите.
    – user181100
    13 мая 2015 в 15:53

1 ответ 1

5

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

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

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

Скриншот

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

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

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

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.