Vueがスクロールバーをアニメーション

<テンプレート>
    <のdiv クラス = 「ホームメイン」 >
        <のdiv クラス = " 進歩-メイン" >
            <DIV クラス = " 進捗コンテンツ"：スタイル= " {幅：width100} " > </ div>
        </ div>
    </ div>
</テンプレート>

<スクリプト>

輸出のデフォルト{
    名前：「ホーム」、
    データ（）{
        リターン{
            width100：0 、
        }。
    }、
    {）（マウント
        setTimeout（（） => {
             この .width100 = ' 80％' 。
        }、100 ）。
    }、
}。
</ SCRIPT>

<スタイルLANG = " スタイラス"スコープ> 
.home - メイン
    幅100％
    高さ100％
    オーバーフロー隠されました
    相対位置
    .progress - メイン{
        国境 - 半径100pxに
        背景 - カラー＃ebeef5
        オーバーフロー隠されました
        相対位置
        200pxの幅
        高さ10pxの
        余白20ピクセル0  0 20ピクセル
        .progress - コンテンツ{
            絶対位置
            左0 
            トップを0 
            高さ100％の
            背景 - 色＃1 409eff
            国境 - 半径100pxに
            1S容易幅推移
        }
    }
</スタイル>