如何在CSS中实现数字增量动画

Chris 发表于 Dev

克里斯

我试图创建类似于Twitter的计数器之类的动画

我想实现相同的效果/动画。

我只是对如何实现动画感到困惑。

有人可以帮忙吗？到目前为止，这是我在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>

第2311章

您的代码有两个问题：

如@NullDev所述，您已放置$text而不是放置$elem在setTimeouts中。这是一个简单的错字。
第二个问题是：

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

在内部setTimeout，this变量与在this外部的变量不同setTimeout。要验证这一点，您可以登录：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。