一个登录页面动画

[pinews]

提交登录后，登录 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

其实这个还有缺陷，一个动画还没完成，下个动画已经开始，下个动画又依赖上一个动画，多点几次就乱掉了，这个我没有去弄，

[crazytree]

没什么意义，不会用这样的设计的

[dingdangnao]

为什么一个提示性的东西要改变原有的布局？还是标题这么大个东西。。感觉有点突兀吧

[littleylv]

1、好丑
2、提示信息不应该改变原有的布局
3、直接在标题下面预留一块用于显示，只需 show hide 即可，别整那些动画

[iTakeo]

为什么不直接在浏览器右上角或者右下角弹出提示呢？

[popvlovs]

不是很好看，而且 login2 的那个是想体现一个“拉”的动作么？个人觉得非常反直觉

[pinews]

@iTakeo 对于相关性的错误提示，在本区域内显示。
@littleylv 并没有改变原有布局，标题并不仅是标题，上升的过程表明登录的过程。

@crazytree 这个设计我也不会用，简单点更好，但是设计本身是动画展示相应的登录逻辑。

错误信息本身不应该占用空间，但是既然有，就要给他展示的机会，展示完就消失。
至于为什么不在一个地方固定显示，还是因为表明登录过程的标题上升的结合。

[pinews]

@popvlovs 可能是动画时间不对，反直觉倒不会，其思路就是，登录失败，自然登录原路返回重置，其错误信息也随之拉去出来的。

还有一个原因是动画时间 0.3s ，这个动画是用在网速较慢的情况下的，demo 里是立即出现了，这点没展示好

[lqzhgood]

你不应该去增加 DOM。
固定一个 DOM 每次来消息去修改这个 DOM 的 text
用 CSS 去控制这个 DOM 的隐藏和显示。

增加 DOM 应该是 通知类的处理，例如右上角等空间足够的地方。
连续点 登录 "密码错误的消息"已经把那么点地方炸了


稍微修改了一下。 供参考
https://codepen.io/anon/pen/JzwKEX

[lqzhgood]

如果你要提现上升的动画。
transform msgDom 的 maxHeight 即可。

我还是觉得已有元素不要动来动去的比较好 :)

[pinews]

@lqzhgood
我也不赞成元素的大动，但为了保持简洁，能动的话就不想增添额外元素动了，
还有就是和登录成功体验一致，所以一起动。

最开始是看到 journey 的登录这样做模仿的，还有就是一些网站做的登录动画不满意。

还有为什么用 transform ？直接用一个 transition 不就好了吗？

[pinews]

@lqzhgood 记不清了，journey 这个应用应该是一个图标上升的动作

[lqzhgood]

@pinews 你这问的就好像 这里有面包 为啥要喝水……