JSFiddle - React, Tailwind, and code Playground

by fersterin

HTML

<style>
#digit {
	width: .5em;
	overflow: hidden;
	font-size: 64px;
	border: 1px solid red;
}
#stripe.animate {
	margin-left: -4.5em;
	transition-property: margin-left;
	transition-duration: 9s;
	transition-timing-function: linear;
}
</style>

<div id="digit"><span id="stripe">0123456789</span></div>

<script>
stripe.onclick = function(){
	var sec = new Date().getSeconds()%10;
	stripe.style.transitionDelay = '-' + sec + 's';
	stripe.classList.add('animate');
}
</script>

<!-- getSeconds получает секунды, например 52. Далее берется остаток от 52, это 2.
Метод transitionDelay добавляет к тегу span с id=stripe, свойство style="transition-delay: -2s;". Задержка анимации с отрицательным число означает, что анимация будет стартовать из состояния когда якобы уже прошло 2 секунды. В данном случае анимация стартует с цифры 2 (т.к. как раз за 2 секунды пройдет сначала от 0до1, а затем от 1до2.).
Вообще у нас десять цифр 0123456789. Одна цифра занимает ширину половину от размера шрифта в текущем блоке, то есть 0.5em.
Когда мы кликаем по блоку с цифрой, происходит добавление класса "animate" со свойствами:
	margin-left: -4.5em; //конечное состояние анимации (покажется число 9).
	transition-property: margin-left;
	transition-duration: 9s;
	transition-timing-function: linear;
Итак класс добавлен, transition-daley задан (функция сработала). Далее анимация начинается (переход). Переход будет осуществляться от состояния margin-left:0 до состояние margin-left: 4.5em в течение 9 секунд (т.к. у нас 9 цифр).
Поскольку нам надо стартовать со второй секунды, нам помогает ранее присвоенное свойство transition-delay: -2s. Т.к. виртуально прошло две секунды, анимация начнется с числа 2.
Если кликнуть еще раз (второй и третий) на блок с цифрой, то ничего не проиойдет. Дело в том, что переход (transition) уже осуществился, то есть исполнились свойства добавленного к тегу класса. А очередной клик просто перезаписывает значение свойства style="transition-delay", остальные же свойства animate...