Animate.css 应用于整个表单后,表单元素原生功能失效

Animate.css 应用于整个表单后,表单元素原生功能失效

平定天下 发布于 2021-11-26 字数 1243 浏览 890 回复 1

最近在做一个微信浏览器中的活动页面,要求翻页时有卡片式动画,于是选用 Animate.css 作为动画效果库

因为这个动画库把 CSS 3 Key-Frame 封装成以动效命名的 CSS 类,所以实现炫酷的翻页动画并没花多少时间,但却遇到一个非常奇葩的 Bug ——

翻页动画结束后,最后一页中的
所有表单元素
原生功能失效 —— 微信、UC 等老版
WebKit 内核尚可在点击文本框时弹出输入法(但接收不到任何输入),最新桌面版 Chrome 的
移动开发模拟器则完全没有反应……

(最新版
Firefox 的“
响应式设计模式”则一切正常,用
3D 视图 查看
DOM 元素堆叠也没有发现表单元素被其它元素盖住)

因为想到 CSS 3 的 3D 变换原理是把动画元素脱离文档流后整体绘制大量各种尺寸的静态位图输出到浏览器(不涉及 DOM 重绘,所以性能高),所以我尝试用“动画结束后微调容器元素尺寸”的方法来强制动画区域重绘,也不奏效……

因为在网上也完全找不到相似案例,如果还不能及时解决,那就只能把表单独立到一个弹出层了(降低了用户体验一致性前端组件复用度)……

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

深巷少女 2021-11-26 1 楼

又是灵光一闪,自己解决了…… 

因为滑动手势的事件监听是自己参考网上博文封装的,对 touchStart、touchMove、touchEnd、touchCancel 都用了 event.preventDefault(),彻底禁用了表单元素的原有功能……(其实只需禁用 touchMove 即可)