CSS3 过渡与动画的基础玩法
2013 年做前端时,大家会明显感受到一个变化:原来很多必须靠 JavaScript 才能做的动效,开始慢慢可以交给 CSS3 了。
2013 年做前端时,大家会明显感受到一个变化:原来很多必须靠 JavaScript 才能做的动效,开始慢慢可以交给 CSS3 了。
CSS3 动画刚流行起来的时候,很多前端最直观的感受就是“终于能做出以前很费劲的效果了”。我当时也一样,看到元素能平滑移动、淡入淡出、缩放旋转,很容易就想把这些能力都塞进页面里。但真正做了几轮页面后,我慢慢发现,动画如果先追求炫,最后往往会伤体验。
在 CSS3 逐渐进入日常开发之后,很多前端会先接触到 transition,然后很快就会继续碰到 transform。它真正让人眼前一亮的地方,是页面元素终于不只是“换颜色”,还可以更自然地移动、缩放和旋转。
到了 2013 年,前端页面已经不再只是“请求一次、渲染一次、结束”。很多交互都希望把一些状态留在浏览器里,于是 localStorage 和 sessionStorage 也开始被越来越多地提到。
2013 年做前端页面时,很多交互都离不开 jQuery Ajax。搜索、保存、翻页、校验、局部刷新,看起来只是多写几个请求,可页面一旦复杂起来,真正先失控的往往不是接口本身,而是页面状态和回调关系。
2013 年前端一个很明显的变化,是越来越多人开始认真讨论 HTML5。对开发者来说,它最先带来的感知并不一定是视频、画布这些高级能力,而是页面结构终于可以写得更“像页面”了。
很多人提到 HTML5,第一反应会想到 video、canvas 这些更显眼的新能力。但对 2013 年的大多数日常页面来说,更容易立刻用起来的,其实是表单元素和输入类型的变化。
在 2013 年的前端页面里,表单交互经常是最能体现 jQuery 价值的地方。输入提示、即时校验、动态添加条目,这些需求放在一起时,如果代码组织得不好,很快就会出现重复绑定和状态混乱的问题。
GitHub Issues 一开始用起来很简单,谁发现问题谁就开一条,评论、补充截图、贴 commit,都很顺手。可只要项目稍微多一点需求,Issue 一多,列表就会迅速变成一锅粥。到了 2013 年我自己开始比较频繁地用它协作时,最明显的感受就是:Issue 系统如果没有最基础的标签约定,很快就会从“记录问题的地方”变成“堆问题的地方”。
如果把 2013 年前端开发最有代表性的技术拿出来,jQuery 基本很难绕开。那时候很多页面交互、表单逻辑、弹窗效果,几乎都建立在 jQuery 之上。