Edit: I figured it out myself. If this question was re-opened, I could provide my own answer.
I'm trying to have a number "tick up" when it changes, in a similar fashion to Twitter's like/retweet/comment counters and Discord's reaction counter. I haven't found any information about this on the web (mainly because I don't know what it's formally called).
Edit: I forgot to include the code, here it is:
The counter element itself:
<span id="counter" class="counter">0</span>
The CSS for the element:
.counter {
display: inline-block;
height: 15px;
font-size: 15px;
overflow-y: hidden;
}
The JavaScript for changing the counter:
function changeCounter(id, num) {
var _x = document.getElementById(id);
_x.innerHTML += _x.innerHTML + "<br>" + num;
_x.style.transition = "0.2s";
setTimeout(function () {
_x.style.marginTop = "-15px";
setTimeout(function () {
_x.innerHTML = num;
_x.style.transition = "0";
_x.style.marginTop = "0";
}, 200);
}, 16);
}
What happens is that it puts the new number next to the original number, goes up, and goes down with just the new number. I want it to have the new number under the old one and just snap to its original position after it stops animating.
function changeCounter(id, num) {
var _x = document.getElementById(id);
_x.innerHTML += _x.innerHTML + "<br>" + num;
_x.style.transition = "0.2s";
setTimeout(function () {
_x.style.marginTop = "-15px";
setTimeout(function () {
_x.innerHTML = num;
_x.style.transition = "0";
_x.style.marginTop = "0";
}, 200);
}, 16);
}
.counter {
display: inline-block;
height: 15px;
font-size: 15px;
overflow-y: hidden;
}
<span id="counter" class="counter">0</span>
<button onclick="changeCounter('counter', Math.floor(Math.random()*100))">Change</button>
Comments
Post a Comment