代码之家 › 专栏 › 技术社区 › Simon

CSS反效果

css html

Simon · 技术社区 · 6 年前

在twitter上,当一条tweet获得喜欢/转发时,就会出现一个整洁的动画,说明这个数字在上升。我发现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>

有谁知道一个好的替代品来创造同样的效果吗?

1 回复 | 直到 6 年前

Chris Li 6 年前

这种效果可以通过切换一个类来实现,我所做的是使用translateY使最后一个数字始终可见,当我添加另一个div时,切换到另一个使最后一个数字可见的类,然后删除该类。

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>