vue在開發移動端中遇到的坑（一）

1css3方面

　　在作css3動畫的時候，好比transition: height 0.3s, 用chrome瀏覽器調試的時候 動畫很流暢完成沒有問題。到了真機調試的時候問題出來了 動畫卡頓看着很難受。在查閱資料以後發現這是個小坑。動畫的時候儘可能不要用margin，padding，height，width,最好用transform去動畫效果。

還有個小問題就是若是元素原本是隱藏的，而後變顯示了，這時後直接執行動畫是無效的，須要加個小延時以後在執行動畫。

例如：

　　.show {

　　　　transform:rotate(7deg);

　　}

　　 <div v-if="flag" style="transition: all 0.3s;"  :class="{show: show}">hello </div>

　　data () {

　　　　retrun： {

　　　　　　　flag: false,

　　　　　　　show: false

　　　　}

　　}

　　this.flag = true

　　setTimeout( ()=>{

　　　　this.show = true

　　},20)

2 pattern

　　這是最近在改input手機輸入格式的時候，發現的一個很好用的屬性，pattern 屬性規定用於驗證輸入字段的模式。

例如：<input type="phone" pattern="\d" />

這樣作在移動端有兩個好處

1.能夠直接調起安卓手機和ios手機上的九宮格數字鍵盤（咱們的產品經理非要這個需求，無論安卓仍是ios輸入手機號碼的時候必須調起數字鍵盤，還好發現了pattern這個屬性，折磨人啊）

2.以前都是用watch去監聽input輸入的內容，若是不是數字就用正則替換點，很麻煩。有了它就很方便了，上面直接寫正則就行了，用戶只能輸入符合正則的內容。

先記錄這兩個坑，和你們分享下，我仍是一個博客小白，我是小文，但願你們一塊兒分享經驗，加油