This topic created in 2596 days ago, the information mentioned may be changed or developed.
提交登录后，登录 XXX 会向上移动（ 0.3 秒），在遇到错误的时候，根据网速快慢会有两种提示方式： 一是网速够快的话，错误信息在“登录 XXX ”的时候也跟着向上移动，3 秒后再下来； 二是网速较慢的话，（“登录 XXX ”向上移动的动画已经完成），之后返回错误信息，这时候“登录 XXX ”马上下来，并把错误信息从上拉下来。
演示： https://webkb.github.io/webkb/%E7%BB%86%E8%8A%82/login.html https://webkb.github.io/webkb/%E7%BB%86%E8%8A%82/login2.html
ps：苦恼 t/546400
其实这个还有缺陷，一个动画还没完成，下个动画已经开始，下个动画又依赖上一个动画，多点几次就乱掉了，这个我没有去弄，
 | 1 crazytree Mar 22, 2019 没什么意义，不会用这样的设计的 |
 | 2 dingdangnao Mar 22, 2019 为什么一个提示性的东西要改变原有的布局？还是标题这么大个东西。。感觉有点突兀吧 |
 | 3 U7Q5tLAex2FI0o0g Mar 22, 2019 1、好丑 2、提示信息不应该改变原有的布局 3、直接在标题下面预留一块用于显示，只需 show hide 即可，别整那些动画 |
 | 4 iTakeo Mar 22, 2019 为什么不直接在浏览器右上角或者右下角弹出提示呢？ |
 | 5 popvlovs Mar 22, 2019 不是很好看，而且 login2 的那个是想体现一个“拉”的动作么？个人觉得非常反直觉 |
 | 6 pinews OP |
| 7 pinews OP @popvlovs 可能是动画时间不对，反直觉倒不会，其思路就是，登录失败，自然登录原路返回重置，其错误信息也随之拉去出来的。 还有一个原因是动画时间 0.3s ，这个动画是用在网速较慢的情况下的，demo 里是立即出现了，这点没展示好 |
 | 8 lqzhgood Mar 22, 2019 你不应该去增加 DOM。 固定一个 DOM 每次来消息去修改这个 DOM 的 text 用 CSS 去控制这个 DOM 的隐藏和显示。 增加 DOM 应该是 通知类的处理，例如右上角等空间足够的地方。 连续点 登录 "密码错误的消息"已经把那么点地方炸了 稍微修改了一下。 供参考 https://codepen.io/anon/pen/JzwKEX |
| 9 lqzhgood Mar 22, 2019 如果你要提现上升的动画。 transform msgDom 的 maxHeight 即可。 我还是觉得已有元素不要动来动去的比较好 :) |
| 10 pinews OP @lqzhgood 我也不赞成元素的大动，但为了保持简洁，能动的话就不想增添额外元素动了， 还有就是和登录成功体验一致，所以一起动。 最开始是看到 journey 的登录这样做模仿的，还有就是一些网站做的登录动画不满意。 还有为什么用 transform ？直接用一个 transition 不就好了吗？ |
Select Language