元素顶部带有动画的生成编号答案

【问题标题】：Spawn number with animation ontop of element元素顶部带有动画的生成编号
【发布时间】：2020-07-08 07:31:00
【问题描述】：

当你的分数增加时，我想制作你可能知道的视频游戏效果。我想要一个数字，如果用户得分，则在得分数字上方的第二个数字会产生并慢慢向上移动并消失。

我认为可以使用 jquery 制作动画，但是如何在 score 元素所在的同一位置生成数字/元素？

示例代码：

    <span id="score">50</span>

    AddScoreAnimation() {
        var element = $('<span/>')//How can I set it in the right position where #score is?
        $(element).text('+20');
        $(element).animate({
          top: '-=120',
          opacity: 0.0
        }, 1000);
        $('#score').text(70);
    }

【问题讨论】：

如果我帮助了你，别忘了接受我的回答并点赞。谢谢

标签： javascript html jquery

【解决方案1】：

我会使用带有一点 JavaScript 的 CSS 动画和伪选择器。不需要为此包含 jQuery :)

const button = document.querySelector('button');
const score = document.querySelector('.score');
let count = 0;

button.addEventListener('click', () => { 
  setScore(20)
});


function setScore(value) {
  score.dataset.added = '+' + value;
  score.dataset.total = count += value;
  if (count) score.classList.add('animate');

  setTimeout(() => {
    score.classList.remove('animate');
  }, 500)
}


setScore(0)

.score {
  position: relative;
  padding: .5rem;
  background: whitesmoke;
}

/*
   pseudo elements used to display 
   the data attribute values
*/
.score::before,
.score::after {
  display: block;
  width: 100%;
  text-align: center;
}


/* total score */
.score::before {
  content: attr(data-total);
}

/* added score */
.score::after {
  content: attr(data-added);
  position: absolute;
  top: 0;
  left: 0;

  /* 
    position added score above total
    0% will make it overlay the total 
  */
  transform: translateY(-100%);
  opacity: 0;
}

/* total score animation (fade in) */
.score.animate::before {
  animation: fade-in .5s;
}
@keyframes fade-in-scale {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* added score animation (fade in up) */
.score.animate::after {
  animation: fade-in-up .5s;
}
@keyframes fade-in-up {
  from { opacity: 0; }
  50%  { opacity: 1; }
  to {
    transform: translateY(-200%);
    opacity: 0;
  }
}




body {
  padding: 3rem;
  text-align: center;
}

<div class="score" data-added="0" data-total="0">
</div>
<button>+20</button>

【讨论】：

这需要count吗？不能只用score.dataset.total += value 吗？
@sirzento 通过if count检查是否有值很好，否则不显示任何动画。这是一个很好的做法，这就是为什么他补充说:)
计数检查还会在初始化时阻止动画（使用 setScore(0)）。零在 js 中被视为假值——为什么不会添加 animate 类。

【解决方案2】：

使用 fadeIn fadeOut 重新创建了您的示例，这比使用 .animate 更简单易行。

我还使用了一些 setTimeout 来向用户显示 +20 正在被添加，然后显示最终分数。

在下面运行 sn-p 以查看它的工作情况。

function AddScoreAnimation(value) {

  var _this = $('#score')
  var currValue = _this.text()
  var incValue = parseInt(currValue) + parseInt(value)

  setTimeout(function() {
    $(_this).fadeOut(500).text('+' + value).fadeIn(500);
  }, 700)
  setTimeout(function() {
    $(_this).fadeOut(500).text(incValue).fadeIn(500);
  }, 2000)

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="score">50</span>

<br>
<button id="add" value="20" onclick="AddScoreAnimation(this.value)">
Add +20
</button>

【讨论】：