阿里前端学习笔记（四）

2014-07-29 by niuzhixiang

CSS动画

transform属性

其实它不是动画效果，而仅仅是静态的元素变形效果。包括斜拉、缩放、旋转、位移。代码如下示例：

  1.     .trans_skew { transform: skew(35deg); } //斜拉
  2.     .trans_scale { transform: scale(1, 0.5); } //缩放
  3.     .trans_rotate { transform: rotate(45deg); } //旋转
  4.     .trans_translate { transform: translate(10px, 20px); } //位移

效果如下图所示：

阿里前端学习笔记（四） - 图1

transition属性

transition属性的作用是平滑的改变CSS的值，如下代码所示：

  1. .trans {
  2.     /*指定background-color这个属性参与动画平滑过渡，持续时间0.3秒，动画效果为擦除效果ease（常用效果有ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier等）*/
  3.     -webkit-transition: background-color 0.3s ease; 
  4.     //以下几行都是对各种浏览器的兼容
  5.     -moz-transition: background-color 0.3s ease;
  6.     -o-transition: background-color 0.3s ease;
  7.     transition: background-color 0.3s ease;
  8. }
  9. /*指定当鼠标悬停时的背景色。因此当鼠标悬停于该元素时，background-color属性将从原有值变为当前值，由前面定义的动画效果来完成从原有值到当前值的平滑过渡*/
  10. .trans:hover {
  11.     background-color: #486AAA;
  12.     color: #fff;
  13. }

animation属性

稍微复杂的动画效果，可以看作是transition的扩展。transtion只能实现属性值的匀速过渡，而animation可以使用@keyframes规则指定关键帧（类似于视频剪辑中的关键帧），从而更细致地控制动画效果。例如以下示例：

  1. //定义关键帧的名字是wobble
  2. @keyframes 'wobble'{
  3.     //关键帧一：指定动画开始时的元素样式，0%可以写为from
  4.     0%{
  5.            left:100px
  6.     }
  7.     //关键帧二：指定动画进行30%后的元素样式
  8.        30%{
  9.            left:300px;
  10.     }
  11.     //关键帧三：指定动画结束时的元素样式，100%可以写为to
  12.       100%{
  13.            left:500px;
  14.     }
  15. }
  16. .animate{
  17.     left:100px;
  18.     //应用之前定义的关键帧wobble，持续时间0.5秒，动画效果为ease-out
  19.    -webkit-animation:wobble 0.5s ease-out;
  20. }

延伸：CSS的@规则

CSS中的@规则是一个CSS语句，有如下几种常见的规则：

  1. @charset，定义样式表使用的字符集
  2. @import，告诉CSS引擎引入一个外部样式表
  3. @media 可以在同一个样式表中，定义不同的样式规则来针对不同的媒介（屏幕或者打印出来的纸媒介）
  4. @font-face，描述将下载的外部字体。
  5. @keyframes，描述CSS动画（animation属性）的中间步骤，即关键帧。

关于CSS动画的更多参考资料，请参见这里。

KISSY的fire函数

KISSY中的fire()函数用于在程序中手动触发事件（而非由用户行为触发的原生事件），并执行事件回调函数，事件名称可以自定义（不一定是click、input等原生事件，也可以是和业务逻辑相关的自定义事件）。KISSY中的fire()函数与jQuery中的trigger()函数用法差不多。

RGBA

CSS样式中的background属性可以取值为rgba。rgba就是r、g、b加上alpha通道（alpha通道用于表示元素透明度）。alpha=0则完全透明，alpha=1则完全不透明。如下示例：

  1. div {
  2.     //透明度为0.5，即50%
  3.     background : rgba(200, 54, 54, 0.5);
  4. }

引入页面

在HTML页面中引入另一个HTML页面： <!--#include file="index.html" -->或者<!--#include virtual="index.html" -->。注意：前者使用的是相对路径，后者使用的是绝对路径（以根路径为准的虚拟路径）。

一些Git操作

  • 如果已经对工作目录做了一些修改，但这些修改还未提交，此时想撤销这些修改的话，可以使用reset命令,该命令会把工作目录中所有未提交的内容清空，使其恢复到上次提交时的状态。使用示例：

    1.   $ git reset --hard HEAD

  • 如果已经做了一个提交（commit），但此时后悔了，想撤销此次提交，可以使用revert命令，该命令会撤销掉上一次（或更早之前的）提交。使用示例：

    1.   $ git revert HEAD

  • 要想创建一个新的本地分支（新分支名假定是daily/2.0.1），可以使用如下命令：

    1.   $ git checkout -b daily/2.0.1

    该命令相当于执行以下这两条命令：

    1.   $ git branch daily/2.0.1 //创建新分支
    2.   $ git checkout daily/2.0.1 //切换到新分支

  • 分支的合并。例如在分支daily/2.0.1上完成了修改，希望将修改的内容也应用在master分支上，可以将daily/2.0.1分支合并到master分支上。首先切换到master分支，然后将daily/2.0.1分支并入当前分支（即master分支），如下示例：

    1.   $ git checkout master //切换到master分支
    2.   $ git merge daily/2.0.1 //将daily/2.0.1并入当前分支（即master分支）

  • 更多参考资料，可以参见这里和这里

硬件加速

在CSS中使用动画效果（transform、transition和animation属性）时，浏览器不会直接使用GPU硬件来执行动画，而是使用缓慢的浏览器软件渲染引擎，这样会导致动画效果不流畅、耗费资源等等。这也是为什么原生应用比Web应用表现更好的原因——原生应用可以充分利用GPU的性能，而Web应用却不能。

为了开启GPU硬件加速，许多浏览器都提供了触发硬件加速的CSS规则，例如使用transform:translateZ(0)就可以告诉浏览器，需要开启硬件加速。

URL编码

在浏览器向服务器发送请求时，如果请求URL中包含汉字或其他特殊字符，浏览器会对请求URL进行编码以后再将请求发出。然而URL编码并没有一个统一的标准，不同的操作系统、不同的浏览器都会导致不同的编码结果。

为了统一编码方式，可以使用JavaScript提供的encodeURI()或encodeURIComponent()函数对请求URL进行编码（编码方式为UTF-8），然后将编码后的URL发送到服务端，这样就可以将URL编码的任务完全交给JavaScript了，而无需浏览器的插手，这样就可以避免因浏览器和操作系统不同而导致的乱码问题。

更多关于URL编码的资料请参见阮一峰的日志