Animate.css 应用于整个表单后，表单元素原生功能失效
最近在做一个微信浏览器中的活动页面，要求翻页时有卡片式动画，于是选用 Animate.css 作为动画效果库。
因为这个动画库把 CSS 3 Key-Frame 封装成以动效命名的 CSS 类，所以实现炫酷的翻页动画并没花多少时间，但却遇到一个非常奇葩的 Bug ——
翻页动画结束后，最后一页中的 所有表单元素 原生功能失效 —— 微信、UC 等老版 WebKit 内核尚可在点击文本框时弹出输入法（但接收不到任何输入），最新桌面版 Chrome 的 移动开发模拟器则完全没有反应……
（最新版 Firefox 的“ 响应式设计模式”则一切正常，用 3D 视图 查看 DOM 元素堆叠也没有发现表单元素被其它元素盖住）
因为想到 CSS 3 的 3D 变换原理是把动画元素脱离文档流后整体绘制大量各种尺寸的静态位图输出到浏览器（不涉及 DOM 重绘，所以性能高），所以我尝试用“动画结束后微调容器元素尺寸”的方法来强制动画区域重绘，也不奏效……
因为在网上也完全找不到相似案例，如果还不能及时解决，那就只能把表单独立到一个弹出层了（降低了用户体验一致性 和 前端组件复用度）……
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
又是灵光一闪，自己解决了……
因为滑动手势的事件监听是自己参考网上博文封装的，对 touchStart、touchMove、touchEnd、touchCancel 都用了 event.preventDefault()，彻底禁用了表单元素的原有功能……（其实只需禁用 touchMove 即可）