设置元素的字体大小时，如何从中心

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);
    }
  };

这样可行，但问题是当调整大小时，如果我左对齐，则数字从左上角调整大小，如果我的数字右对齐，则右上角调整大小。我想改变转换的字体大小，并从中心进行。

我非常肯定我目前的实现这是不可能的，事实上我几乎肯定我将不得不转而使用CSS3的animate()上的jQuery transform (scale)。 我真的不理解“CSS动画”和“JavaScript动画”之间的difference，因为对我来说，看起来JavaScript最终还是会使用CSS动画？所以我真的不确定我应该走哪条路

Answer 1

确保数字的容器足够大以容纳放大的数字。通过给数字设置以vw设置的边距，将数字放在容器的中心 然后，当脚本将字体大小从6vw更改为7vw时，将边距减小0.5vw并使边距具有相同的过渡时间。这应该在过渡期间保持数字居中 您也可以使用相对或绝对定位而不是保证金;在这种情况下，通过设置顶部和左侧来定位数字，并为顶部和左侧设置动画。