每天坚持做一件事(这事当然是有点难度和意义的事情,而不是睡觉。。。)还真不容易,有两天没有写前端笔记了。一方面是正职工作忙,另一面是感觉能输出的东西越来越少。那今天来分享的什么的,找来找去,觉得less的css3前缀的写法可以分享。因为最近也一直在准备用less写个css3动画库,简化css3动画的开发。
css3前缀
比如我们要写一个animation的css3动画,为了兼容多家浏览器,需要在前面加各种前缀:
div{//标准的写法
animation:fadeIn
1
s;
}
|
div{//加前缀
-webkit-animation:fadeIn
1
s;
-moz-animation:fadeIn
1
s;
-ms-animation:fadeIn
1
s;
-o-animation:fadeIn
1
s;
animation:fadeIn
1
s;
}
|
这时候,如果你是用less(sass应该也有这种功能),那么他的 混入 写法就很方便了
less写法
可以先定义一个animation的混入
.animation(@args){
-webkit-animation:@args;
-moz-animation:@args;
-ms-animation:@args;
-o-animation:@args;
animation:@args;
}
|
然后再调用
div{
.animation(fadeIn
1
s);//把动画当做参数传进去即可
}
|
这样写的好处是,你后面的所有的animation动画都可以直接调用混入 .animation(@args),不用管前缀了。
less更简单的写法
上面的写法解决了animation的前缀,但是如果是transition呢?又需要写一个transition的混入
.transition(@arg){
-webkit-transition:@args;
-o-transition:@args;
-ms-transition:@args;
-moz-transition:@args;
transition:@args;
}
|
其实代码还是有重复的,能不能再简化呢?答案是可以的!我们先写一个单单处理前缀的混入
.
pre
(@style,@value){
-webkit-@{style}: @value;
-moz-@{style}: @value;
-ms-@{style}: @value;
@{style}: @value;
}
|
然后再写各个属性的:
.animation(@value){
.
pre
(animation,@value);
}
.transition(@arg){
.
pre
(transition,@arg);
}
|
这样页面出现的css3前缀只有一次,看起来舒服多了。
keyframes的写法
这时候,也许会有童鞋想到动画帧了,这个同样存在前缀的问题。因为他的写法有点特殊,不能使用上面的pre混入:
@keyframes {
0%
,
100%
{}
}
@-webkit-keyframes {
0%
,
100%
{}
}
@-moz-keyframes {
0%
,
100%
{}
}
@-ms-keyframes {
0%
,
100%
{}
}
@
-0
-keyframes {
0%
,
100%
{}
}
|
这时候,我们可以为他单独定义一个keyframes混入,把动画帧抽离出来:
.keyframes(@name) {
@-webkit-keyframes @name {
.-frames(-webkit-)
}
@-moz-keyframes @name {
.-frames(-moz-)
}
@-o-keyframes @name {
.-frames(-o-)
}
@-ms-keyframes @name {
.-frames(-ms-)
}
@keyframes @name {
.-frames()
}
}
|
但是具体怎么用呢,看到上面里面还有.-frames()的混入,感觉很凌乱,我举个具体的动画例子,你就知道怎么写了:
比如做一个之前的一篇文章介绍了匀速旋转的圆 这个动画:
.rotate(){
.keyframes(rotate);
.-frames(@-...){
0%
,
100%
{
@{-}transform:rotate(
0
deg);
}
100%
{
@{-}transform:rotate(
360
deg);
}
}
}
|
上面定义了一个rotate()混入,调用了keyframes(),声明了动画帧为rotate的动画。因为旋转的动画会用到transform,而transform又是需要加前缀的,当然你可以用上面介绍的方法去写:
.transform(@arg){//先定义一个混入
.
pre
(transform,@arg);
}
//再在动画帧里面应用
0%
,
100%
{
.transform(rotate(
0
deg);
}
100%
{
.transform(rotate(
360
deg);
}
|
这样的写法生成的css还是很冗余的,他会在每个keyframes下生成所有前缀的transform,这是多余的,我们只有在相应的前缀下生成相应的transform就行了。
比如在@-webkit-keyframes下只需要生成-webkit-transform。
最简化的写法就是在.-frames()传入相应的前缀参数,然后接收参数时通过@{-}来接收。比如transform:
.-frames(@-...){//这里的参数写法是固定的
0%
,
100%
{
@{-}transform:rotate(
0
deg);
}
100%
{
@{-}transform:rotate(
360
deg);
}
}
|
这样基本就讲完了。还有一点关于编译的问题,用sublime的童鞋,用里面的less2css是无法编译上面的写法的,之前有篇文章介绍过。我用的是nodejs的编译,比如fis、grunt这些构建工具是可以的。至于考拉,可以去试下,我没怎么用。