CSS反作用

Question

在Twitter上，当一条推文获得点赞/转发时，就会出现一个整齐的动画，代表数字不断上升。我发现CSS具有类似的效果，但是它使用了一种非常奇怪的方法：

div {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid black;
  overflow: hidden;
}
div:after {
  content: attr(data-val);
  position: absolute;
  top: 0;
  left: 0;
  line-height: 20px;
  text-align: center;
  -webkit-animation: loop 10s linear;
  animation: loop 10s linear;
}
@-webkit-keyframes loop {
  0% { margin-top: 0px; }
  9% { margin-top: 0px; }
  10% { margin-top: -20px; }
  19% { margin-top: -20px; }
  20% { margin-top: -40px; }
  29% { margin-top: -40px; }
  30% { margin-top: -60px; }
  39% { margin-top: -60px; }
  40% { margin-top: -80px; }
  49% { margin-top: -80px; }
  50% { margin-top: -100px; }
  59% { margin-top: -100px; }
  60% { margin-top: -120px; }
  69% { margin-top: -120px; }
  70% { margin-top: -140px; }
  79% { margin-top: -140px; }
  80% { margin-top: -160px; }
  89% { margin-top: -160px; }
  90% { margin-top: -180px; }
  99% { margin-top: -180px; }
  100% { margin-top: -200px; }
}
@keyframes loop {
  0% { margin-top: 0px; }
  9% { margin-top: 0px; }
  10% { margin-top: -20px; }
  19% { margin-top: -20px; }
  20% { margin-top: -40px; }
  29% { margin-top: -40px; }
  30% { margin-top: -60px; }
  39% { margin-top: -60px; }
  40% { margin-top: -80px; }
  49% { margin-top: -80px; }
  50% { margin-top: -100px; }
  59% { margin-top: -100px; }
  60% { margin-top: -120px; }
  69% { margin-top: -120px; }
  70% { margin-top: -140px; }
  79% { margin-top: -140px; }
  80% { margin-top: -160px; }
  89% { margin-top: -160px; }
  90% { margin-top: -180px; }
  99% { margin-top: -180px; }
  100% { margin-top: -200px; }
}

<div class="loop" data-val="0 10 20 30 40 50 60 70 80 90"></div>

这种方法真的很难整合到我的项目中。我想知道是否有人对我不一定知道增加的数字有更好的解决方案...

$('.add').on("click", function() {
  
  
  let numb = $('.numb');
  let rand = Math.floor(Math.random() * 6);
  
  numb.text(parseInt(numb.text()) + rand)

});

.numb {
 padding: 12px 0;
 font-size: 26px;
 font-family: Arial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="numb">5</div>
<button class="add">Add to number</button>

有人会知道创建相同效果的好方法吗？

Answer 1

通过切换一个类可能会产生效果，我所做的是使用translateY使最后一个数字始终可见，当我添加另一个div时，切换到另一个使第二个最后一个数字可见的类，然后删除该类。 / p>

function createNum() {
		  let numb = document.querySelector(".numb_list");
		  let rand = Math.floor(Math.random() * 6);
		  let newNum = document.createElement("div");
		  newNum.innerText = rand;
		  numb.classList.toggle("switch");
		  numb.appendChild(newNum);
		  setTimeout(function() {
		  	numb.classList.toggle("switch");
		  },1)
		}

.numb_container {
	height: 21px;
	overflow: hidden;
}

.numb_list {
    transform: translateY(calc(-100% + 21px));
    transition: transform 0.2s linear;
}

.switch {
	transform: translateY(calc(-100% + 42px));
	transition: none;
}

<div class="numb_container">
	<div class="numb_list">
		<div>1</div>
	</div>
</div>
<button class="add" onclick="createNum()">Add to number</button>