當設置元素的字體大小W /過渡，如何從心的大小

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

這工作，但問題是，當調整大小時，數量從左上角調整大小，如果我走了數正確的，如果我的號碼有正確的理由，右上角。我想改變字體大小w /過渡，並從中心做。

我非常確定我目前的實現是不可能的，事實上，我幾乎可以肯定，我將不得不切換到在CSS3的transform (scale)上使用jQuery的animate()。 我真的不明白「CSS動畫」和「JavaScript動畫」之間的difference，因爲對我來說，JavaScript看起來只是最終使用CSS動畫？所以我真的不知道我應該去哪條大道

Answer 1

確保數字的容器足夠大以容納放大的數字。將數字放在容器的中央，給數字設定一個以vw爲單位的邊距。
然後，當腳本將字體大小從6vw更改爲7vw時，將邊距減少0.5vw，併爲邊距提供相同的轉換時間。這應該在轉換過程中保持數字居中。
您也可以使用相對或絕對定位而不是邊距;在這種情況下，通過設置頂部和左側來定位數字，並將頂部和左側設置爲動畫。