JSFiddle - React, Tailwind, and code Playground

by Trina Lu

HTML

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<div class="date" default-value="1">
  <div class="num_wrapper">
    <div class="num" data-value="0">0</div>
    <div class="num" data-value="1">1</div>
    <div class="num active" data-value="2">2</div>
    <div class="num" data-value="3">3</div>
    <div class="num" data-value="4">4</div>
    <div class="num" data-value="5">5</div>
    <div class="num" data-value="6">6</div>
    <div class="num" data-value="7">7</div>
    <div class="num" data-value="8">8</div>
    <div class="num" data-value="9">9</div>
  </div>
</div>
<div class="date" id="date_2" default-value="9">
  <div class="num_wrapper">
    <div class="num active" data-value="0">0</div>
    <div class="num" data-value="1">1</div>
    <div class="num" data-value="2">2</div>
    <div class="num" data-value="3">3</div>
    <div class="num" data-value="4">4</div>
    <div class="num" data-value="5">5</div>
    <div class="num" data-value="6">6</div>
    <div class="num" data-value="7">7</div>
    <div class="num" data-value="8">8</div>
    <div class="num" data-value="9">9</div>
  </div>
</div>
<div class="date" default-value="9">
  <div class="num_wrapper">
    <div class="num" data-value="0">0</div>
    <div class="num active" data-value="1">1</div>
    <div class="num" data-value="2">2</div>
    <div class="num" data-value="3">3</div>
    <div class="num" data-value="4">4</div>
    <div class="num" data-value="5">5</div>
    <div class="num" data-value="6">6</div>
    <div class="num" data-value="7">7</div>
    <div class="num" data-value="8">8</div>
    <div class="num" data-value="9">9</div>
  </div>
</div>
<div class="date" default-value="3">
  <div class="num_wrapper">
    <div class="num" data-value="0">0</div>
    <div class="num" data-value="1">1</div>
    <div class="num" data-value="2">2</div>
    <div class="num" data-value="3">3</div>
    <div class="num" data-value="4">4</div>
    <div class="num" data-value="5">5</div>
   ...

CSS

.date {
  display: inline-block;
  border: 1px solid #878787;
  padding: 1px 2px;
  height: 1em;
  overflow: hidden;
}

.num_wrapper {
  position: relative;
  //transition: all 0.5s ease-in;
}

JavaScript

var offset = -18;

$('.date').each(function(i, v) {
  var d = $(this).attr('default-value');
  var y = (d) * offset;
  $(this).children('.num_wrapper').css('transform', 'translateY(' + y + 'px)');
});

setTimeout(function() {
  $('.num.active').each(function(i, v) {
    var tmp = $(this).parents('.num_wrapper').css('transform').split(/,/);
    var t = parseInt(tmp[5]);
    var y = parseInt($(this).attr('data-value')) * offset;
    console.log(t, y);
    $(this).parents('.num_wrapper').css({
      transform: 'translateY(' + y + 'px)',
      transition: 'all 0.5s ease-in'
    });
  });
}, 3000);