技術標籤：css動畫cssvuecss3

vue專案登入頁-實現字型動畫案例
實現思路：
1，讓每個字都包含在span標籤中，span標籤的display:inner-block
2，頁面剛生成時（動畫之前）設定margin寬度為80px,opacity為0.2
3，頁面渲染完後（mounted方法）設定一個setTimeout，新增一個css樣式，css樣式中含有動畫效果，主要程式碼如下所示

mounted方法

mounted() {
            setTimeout(()=>{
                this.wordFlag = true
            },200)
        },
 

html的程式碼

<div class="lg-word" :class="[wordFlag?'lg-done':'']">
                <!--招人才，促就業，為千萬企業、學校、學生服務的平臺 -->
                <span class="w-base">某</span>
                <span class="w-base">某</span>
                <span class="w-base">平</span>
                <span class="w-base">臺</span>
                <span class="w-base">,</span>
                <span class="w-base">招</span>
                <span class="w-base">人</span>
                <span class="w-base">才</span>
                <span class="w-base">,</span>
                <span class="w-base">促</span>
                <span class="w-base">就</span>
                <span class="w-base">業</span>
                <span class="w-base">,</span>
                <span class="w-base">為</span>
                <span class="w-base">千</span>
                <span class="w-base">萬</span>
                <span class="w-base">企</span>
                <span class="w-base">業</span>
                <span class="w-base">、</span>
                <span class="w-base">學</span>
                <span class="w-base">校</span>
                <span class="w-base">、</span>
                <span class="w-base">學</span>
                <span class="w-base">生</span>
                <span class="w-base">服</span>
                <span class="w-base">務</span>
                <span class="w-base">的</span>
                <span class="w-base">平</span>
                <span class="w-base">臺</span>
                <span class="w-base">。</span>
            </div>
 

css程式碼

.lg-word{
            width: 1100px;
            margin: 80px auto;
            display: flex;
            overflow: hidden;
           /* border: 1px solid red;*/
            font-size: 32px;
           /* color: #ffffff;*/
            .w-base{
                display: inline-block;
                margin:0 40px;
                opacity: 0.2;
                /*新增過渡效果*/
                transition: margin 2s,opacity 2s;
            }
        }
 

.lg-done{
            /*width: 1440px;*/
            .w-base{
                margin:0 2px;
                opacity: 1;
            }
        }