如何停掉CSS3动画？

2012-09-04 Tue

CSS3里面提供原生的动画（Animation）和过渡（Transition）支持，使用起来非常简单方便，但是一直有一个问题困扰着我：如何实现像JQuery动画提供stop方法一样的功能？

今天在学习bootstrap代码的时候发现一段有意思的代码。这段代码意图非常简单，就是要显示$element元素，并且给它加上”in”类，使其产生slide in的效果。但让我看不懂的是：that.$element[0].offsetWidth这句代码，好像没有做什么实质性的事情，后面的注释写的是force reflow（强制重绘）。

在网上查找了相关的资料，看到Stackoverflow上有人做了解答：

That’s where the call to the left offset comes in. This is one of the properties that are said to cause a re-flow in the page. This is obviously usually a bad thing performance wise, but it seems necessary to prevent the css transitions picking up the wrong values.

大概的意思是：读取offsetWidth(或者left offset)导致了浏览器的re-flow操作，这样做的目的有点类似我们在使用buffer时候的flush操作，虽然会带来性能问题，但是在特定场景下可以防止css3 tranisition取到错误的值。

前端中的数学知识

2012-06-24 Sun

最近在学习webgl，看得很吃力，感叹学校里的数学知识都已经全还给老师。总结一下这几天恶补的数学知识，以免猴子搬苞谷。。。

矢量（vector）

矢量亦称向量。指一个同时具有大小和方向的几何对象，数学中相对于标量（只有大小）。

矢量有多种表示方法，比如：用起点A和终点B来表示；在三维直角坐标系Oxyz里可以用原点（0,0,0）到空间中任意一点表示一个向量。

单位矢量

矢量空间中的单位矢量就是长度为1的矢量。也就是模为1的矢量。

基本矢量

三维直角坐标系中，基本矢量就是以横轴（Ox）、竖轴（Oy）以及纵轴（Oz）为方向的三个单位矢量。这三个矢量取好以后，其它的矢量就可以通过三元数组来表示，因为它们可以表示成一定倍数的三个基本矢量的总合。比如说一个标示为(2,1,3)的矢量就是2个矢量加上1个矢量加上3个矢量得到的矢量。

更多矢量相关知识参考：http://zh.wikipedia.org/wiki/%E7%9F%A2%E9%87%8F，这里就不赘述了。

矩阵（Matrix）

数学上，一个m×n的矩阵是一个由m行n列元素排列成的矩形阵列。矩阵里的元素可以是数字、符号或数学式。以下是一个由6个数字符素构成的2行3列的矩阵：

JavaScript奇技淫巧（持续更新）

2012-05-09 Wed

JavaScript是一门很“飘逸”的语言，网上很多朋友总结了其中不少奇技淫巧。其实，这些技巧并不都推荐使用，但是了解其背后的原理能帮助你更上一层楼。在此收集了其中一些附在下面：

把数值类型装换为字符串

转型： 1 + ”

这个比较简单，加法运算符接收两个参数中，任意一个是字符串，会将另位一个转换为字符串，然后拼接起来。

把字符串转换为数值类型

转型：+’1’

我们知道-作为减法运算符时接收两个参数，而作为求负运算符时，接收一个参数。JavaScript 支持另一个不多见的“求正”的+运算符。显然，+会尝试把任何接收到的参数转换为数值型。如此，我们就有了一个廉价转型方法，考虑一下：parseInt('123')vs+'123'.

举一反三

'1' * 1乘法运算符接收数值型参数，字符串会先转换成数字再和1做计算
'1' / 1同上
'1' - 0同上
'1' + 0注意是不行的，它得到的值是：'10'。因为加法运算符两个参数中如果有一个为字符串，会将另外一个转换为字符串，然后将两个字符串拼接起来

转型并取整：’123.4’ | 0

这里使用“或运算”将左边得字符串隐式转换为数值型，再与0或。所有位运算逗要求使用32位整数参与运算。所以这又式一个廉价得转换取整方法。考虑一下：Math.floor('1234.5')vs'1234.5' | 0

但是，32位整数表示的数据范围是有限的，因此这一招在数值超过2³¹ - 1时不适用，考虑一下'12345678912.3' ^ 0

举一反三

'1234.5' ^ 0完成转型并取整，与0异或，得到它本身。
~~'1234.5'同样可以完成转型并取整，两次取反后得到本身。
--'1234.5'会失败。虽然我们说负负得正，但是在C语系中，--运算符优先级高于单个-。解决办法很简单，把--写成- -就好啦，赠加一个空格避免运算符被错误地识别。同理，++也要这么处理。

开始用octopress写博客

2012-02-13 Mon

注册和配置Git

开始之前，确保你已经有了Github账号一枚和Git的正确配置。没有的朋友可以先移步Github注册并安装配置Git

首先，创建你的blog仓库：“username(请确保和你的帐号相同).github.com”

$ mkdir username.github.com
$ cd username.github.com

在仓库下新建一个HTML文件

index.html

<html>
    <head>
        <title>Hello World</title>
    <head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

初始化仓库、提交并push到Github:

$ git init
$ git add .
$ git commit -a -m 'init commit.'
$ git remote add origin
$ git push origin master

ok了，用username.github.com就可以访问上面的页面

Newer →