vue移动端开发使用vant和animate.css遇到的坑

移动端开发使用vant作为ui主要框架已经使用animate.css作为动画库开发遇到的一些问题

太坑了。。。。。。。
在使用animate.css动画的时候，要使用动画的元素最好是与vant的绝对定位的元素同级，最好不要把vant中绝对定位的组件放到使用动画的元素。举个例子：



如图示例，组件van-number-keyboard包含在做动画的元素中，结果导致position的值虽然为fixed,并且bottom为0，但是组件还是跑到了页面上方，位置出现异常。

修正之后如下图显示：



调整之后的显示就正常了，还有其他的问题这里就不一一说明了，也是我找了好久才找出来的问题，真的坑。写出来希望大家遇到问题的时候能很快找到解决方案。