目前在最新的 chrome (Android 、 Windows )、手机上自带的 WebKit 上都有概率复现这个问题, Firefox 没试过。
大概的流程是一个 CSS 动画里面包含一个输入框,给外层容器加一个动画,同时给输入框焦点,动画结束的坐标不一定能被正确计算。
还有一些其他条件,不过都是细节问题。我之后可以做个demo
然后乱搞一下坐标就对了。或者比如开发者工具重新指定一个坐标(删掉 left:0 再加上之类的)
1
learnshare 2016-10-02 11:28:38 +08:00
私以为输入框之类的控件不适合做动画,自己绘制的图形做动画比较好。
可以每家浏览器报一下 |
2
yangff OP @learnshare 页面 slide in 的效果,不是输入框的动画
|
3
xxxyyy 2016-10-02 11:57:57 +08:00 via Android
给个 demo 来看下
|
4
yangff OP @xxxyyy https://gist.github.com/Yangff/7f1f5a38ea30381eb6cf82c7b13efc31
原理上大概是这样的 1. CSS3 动画 2. 动态 DOM 修改 3. input 的 focus |
5
yangff OP 解决方案的话,把 focus 丢在 nextick 之类的( settimeout )或者别的怎么搞一下都可以……
|
6
xxxyyy 2016-10-02 14:38:37 +08:00 via Android 1
|