javascript - 用/transition设置元素的字体大小时，如何从中心调整大小

Question

所以我目前正在制作一个年龄计数器应用程序

我想做的是让数字每次增加时都会弹出。

我已经尝试了几种不同的技术，并取得了一些效果——但是有一个问题。

所以这是我当前的解决方案，在我的 .js 中:

  setInterval(this.bubbleNumber.bind(this),1000);

  App.fn.bubbleNumber = function()
  {
    var hour = $('hour-placeholder');
    if(hour)
    {
      hour.style.fontSize="7vw";
      hour.style.webkitTransition=".1s ease-in-out";
      setTimeout(function(){
        hour.style.fontSize="6vw";
        hour.style.webkitTransition=".6s ease-in-out";
      }, 500);
    }
  };

这行得通，但问题是，当调整大小时，如果数字左对齐，数字从左上角调整大小，如果数字右对齐，数字从右上角调整。我想更改带过渡的字体大小，并从中心开始。

我很确定在我当前的实现中这是不可能的，事实上我几乎可以肯定我将不得不切换到使用 jQuery 的 animate()在 CSS3 上 transform (scale) . 我不太明白 difference在“CSS 动画”和“JavaScript 动画”之间，因为对我来说，JavaScript 似乎最终还是使用了 CSS 动画？所以我真的不确定我应该走哪条路

Answer 1

确保数字的容器足够大以容纳放大的数字。通过给数字一个在 vw 中设置的边距，将数字定位在容器的中心。
然后，当脚本将字体大小从 6vw 更改为 7vw 时，将边距减少 0.5vw 并为边距提供相同的过渡时间。这应该使数字在过渡期间居中。
您还可以使用相对或绝对定位而不是边距；在这种情况下，通过设置 top 和 left 来定位数字，并为 top 和 left 设置动画。