Skip to content

Latest commit

 

History

History
127 lines (87 loc) · 6.46 KB

20140729.md

File metadata and controls

127 lines (87 loc) · 6.46 KB
Raw

阿里前端学习笔记（四）

2014-07-29 by niuzhixiang

##CSS动画##

###transform属性###

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

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

效果如下图所示：

###transition属性###

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

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

###animation属性###

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

//定义关键帧的名字是wobble
@keyframes 'wobble'{
	//关键帧一：指定动画开始时的元素样式，0%可以写为from
	0%{
   		left:100px
	}
	//关键帧二：指定动画进行30%后的元素样式
   	30%{
   		left:300px;
	}
	//关键帧三：指定动画结束时的元素样式，100%可以写为to
  	100%{
   		left:500px;
	}
}
.animate{
	left:100px;
	//应用之前定义的关键帧wobble，持续时间0.5秒，动画效果为ease-out
   -webkit-animation:wobble 0.5s ease-out;
}

###延伸：CSS的@规则###

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

@charset，定义样式表使用的字符集
@import，告诉CSS引擎引入一个外部样式表
@media 可以在同一个样式表中，定义不同的样式规则来针对不同的媒介（屏幕或者打印出来的纸媒介）
@font-face，描述将下载的外部字体。
@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则完全不透明。如下示例：

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

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

##一些Git操作##

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

      $ git reset --hard HEAD

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

      $ git revert HEAD

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

      $ git checkout -b daily/2.0.1

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

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

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

      $ git checkout master //切换到master分支
  $ 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编码的资料请参见阮一峰的日志