时间戳

首页 > 解决方案 > 如何在 CSS 中实现数字递增动画

javascript - 如何在 CSS 中实现数字递增动画

问题描述

我试图创建一个类似于 Twitter 帖子的动画，比如 counter

样品在这里

我想实现相同的效果/动画。我对如何实现动画感到困惑。

这是我到目前为止在 jQuery 中所做的：

$(function() {
  var $number = 1;
  $('#test').click(function() {
    var $elem = $(this).find('span');
    var $text = $(this).find('span').text();
    $number = $number + 1;
    setTimeout(function() {
      $(this).find('span').removeClass("static").addClass("up");
    }, 0);
    setTimeout(function() {
      $elem.text($number);
    }, 100);
    setTimeout(function() {
      $elem.removeClass("up").addClass("down");
    }, 100);
    setTimeout(function() {
      $elem.removeClass("down").addClass("static");
    }, 200);
  });
});
.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="btn btn-sm"><span class="static"> 1</span></button>

标签： javascripthtmljquerycss

解决方案

您的代码有两个问题：

  1. 正如@NullDev所提到的，你已经放置$text而不是$elem你setTimeout的一个。这是一个简单的错字。
  2. 第二个问题是行：
$(this).find('span').removeClass("static").addClass("up");

在内部setTimeout，变量与外部变量不在this同一个上下文中。要验证这一点，您可以记录：thissetTimeout

console.log($(this).find('span') === $elem); // should be false

要解决此问题，您只需替换：

$(this).find('span').removeClass("static").addClass("up");

在你的第一个setTimeout：

$elem.removeClass("static").addClass("up");

您可以在下面找到工作代码：

$(function() {
  var $number = 1;
  $('#test').click(function() {
    var $elem = $(this).find('span');
    var $text = $(this).find('span').text();
    $number = $number + 1;
    setTimeout(function() {
      $elem.removeClass("static").addClass("up");
    }, 0);
    setTimeout(function() {
      $elem.text($number);
    }, 100);
    setTimeout(function() {
      $elem.removeClass("up").addClass("down");
    }, 100);
    setTimeout(function() {
      $elem.removeClass("down").addClass("static");
    }, 200);
  });
});
.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="btn btn-sm"><span class="static"> 1</span></button>

推荐阅读