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输入的内容，若是不是数字就用正则替换点，很麻烦。有了它就很方便了，上面直接写正则就行了，用户只能输入符合正则的内容。

先记录这两个坑，和你们分享下，我仍是一个博客小白，我是小文，但愿你们一块儿分享经验，加油