提交登录后，登录 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：苦恼 https://www.v2ex.com/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