I've been attempting to replicate the animation seen on Twitter's post like counter (the flipping numbers effect that happens when you like a post). Despite my best efforts, I can't seem to make it work. Here is what I have tried:
$(function () {
$('#test').click(function () {
var $text = $(this).text();
$(this).addClass('up');
$(this).text($text + 1);
$(this).toggleClass('up down');
$(this).toggleClass('down static');
});
}); .up {
display: inline-flex;
opacity: 0;
transform: translate3d(0, -20px, 0);
transition: 0.1s ease-in-out;
}
.down {
display: inline-flex;
opacity: 0;
transform: translate3d(0, 20px, 0);
}
.static {
display: inline-flex;
opacity: 1;
transform: translate3d(0, 0px, 0);
transition: 0.1s ease-in-out;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="test" class=""> 1 </button>Unfortunately, my attempts were unsuccessful.
Is there anyone who could assist me with this?