Git提交规范

最近，写一个“销售助手”的前端展示页面，因为是纯前端页面以及对兼容性要求不高（不需要考虑IE用户，即IE10即以上版本），所以自由度很大，没有选择用react等前端框架，因为刚开始需求是只要一个页面TAT。页面用原生JS写，目前就用了“html2canvas.js”插件，恩，追求不用插件自己造轮子orz。公司项目为了兼容，动画全部用jQuery写，发现自己对CSS动画相当的生疏，越写越发现CSS动画能力的强大，再次做个记录。

1、 前端动画种类

前端动画如果用JS（不讨论jQuery，即animate()）书写，主要用setTimeoout(),setTimeInterval(),requestAnimationFrame()（这个还有有用处的，CSS还不能对所有的属性写动画，比如：ScrollTop等）。
用CSS写的话，animation配合keyframe可以完成很多复杂的动画，但是使用起来不方便，而transition虽然动画简单但是使用方便，而transform属性虽然英文有“改变”的含义但是它是静态属性。
JS动画和CSS动画之间，说的最多的估计就是性能了，然而看文档除了少数属性区别并不大。

1.1 属性

Chromium项目里，渲染线程分为main thread和compositor thread。对于backface-visibility、opacity、perspective、perspective-origin、transfrom这几个属性，
css触发compositor thread 而JS触发 main thread再触发compositor thread，所以用CSS较好。

在主线程中，维护了一棵Layer树（LayerTreeHost），管理了TiledLayer，在compositor thread，维护了同样一颗LayerTreeHostImpl，管理了LayerImpl，这两棵树的内容是拷贝关系。因此可以彼此不干扰，当Javascript在main thread操作LayerTreeHost的同时，compositor thread可以用LayerTreeHostImpl做渲染。当Javascript繁忙导致主线程卡住时，合成到屏幕的过程也是流畅的。
为了实现防假死，鼠标键盘消息会被首先分发到compositor thread，然后再到main thread。这样，当main thread繁忙时，compositor thread还是能够响应一部分消息，例如，鼠标滚动时，加入main thread繁忙，compositor thread也会处理滚动消息，滚动已经被提交的页面部分（未被提交的部分将被刷白）。

1.2 要注意reflow

css或是js控制动画，reflow都是必然的，要减少reflow。

2、 CSS触发区别

2.1 transition

transition: property duration timing-function delay;

transition: all ease-out 1s;
-moz-transition: all ease-out 1s; /* Firefox 4 */
-webkit-transition: all ease-out 1s; /* Safari 和 Chrome */
-o-transition: all ease-out 1s; /* Opera */

值	描述
linear	匀速（等于 cubic-bezier(0,0,1,1)）。
ease	从慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	慢慢变快（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	慢慢变慢（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	先变快再到慢（等于 cubic-bezier(0.42,0,0.58,1)）。渐显渐隐效果。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

当设定的属性改变时，动画就会触发，但是需要注意效率(主要正对减少reflow)：

// 不好的写法
el.style.left = "10px";
el.style.top  = "10px";
el.style.background = '#eee'; 
// 比较好的写法
el.className += " theclassname";

如果属性为设置初始值，则第一次不会触发；若要对位置高度的div设置动画可以用max-height来设置。

2.2 animation

animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; 
@keyframes mymove
{
    from {left:0px;}
    to {left:200px;}
}
@-webkit-keyframes mymove 
{
    from {left:0px;}
    to {left:200px;}
}

当display属性改变时触发，页面加载时也会触发。

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jjworking@qq.com