css3的​​​​​transition特性:增强网站的体验的CSS3 Transition使用详解

目录
[隐藏]

这是一个传说,在两年前第一份CSS3中文手册出来没几天时,它就躺在我的电脑里了,可惜只是一直躺着,仅此而已。其实我算是个用到什么才会去学习什么的懒人,所以很多东西都只是“略懂,略懂”。

这次看到了CSS3的​​​​​Transition的小绚丽,我就不淡定了,立即马上扒别人的代码查找详细资料补充营养。本站对transition属性的旋转特性作了应用,可将鼠标滑动到页面导航栏以及评论者头像进行体验(据传落后的IE总是不给力,别用它来围观了)。

后来发现来自Ethan's Dream的博客的这篇介绍写的较为详尽,举例也都很不错,于是转摘以供学习与分享。突然再次深刻地觉得,写一篇教程很容易,而写一篇内容详尽通俗易懂的东西真的很不容易。

以下内容摘自:hhttp://imethan.com/?p=236

​​​​​Transition是CSS3中新添加的特性,不知道翻译成什么叫法更好听一点,暂且叫做“转换”吧,即当元素在大小、颜色、布局、透明度等数值改变时(请注意是数值的改变),可以使其产生过渡的动画效果,比如当元素的大小变动时,可以使用Transition将这个变动过程变得分平滑,可以增强网站的体验。

基础知识

Transition对应的CSS属性列表:
transition-property
* 指定当元素哪个属性改变时执行Transition效果,属性可以时以下属性:none、all以及其他可以触发浏览器reflow或repaint的属性。
* 当指定为none时,动画立即停止,当指定为all的时候,则当元素产生任何属性值变化时都将执行“转换”效果,比如大小改变。
* 初始默认值为all.

transition-duration
* 指定“转换”过程的时间,如:1s、none。
* 初始默认值为0.

transition-timing-function
* 指定“转换”过程中可用的效果,预设的有:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2),默认值时easy。
* cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值,如下曲线所示,通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。

* 初始默认值为default.

transition-delay
* 指定一个动画开始执行的时间,即当改变元素属性值后多长时间开始执行“转换效果”
* 初始默认值为0.

以上属性可看下面这个demo(如果无法看到效果,请更换你的浏览器):

 
这是一个参照物

深度问题挖掘

属性值连写(短属性)
* transition和background等CSS属性一样支持属性值连写,比如:-webkit-transition: width 1s easy-in-out;
* 需要值得注意的是,原则上所有属性值是不区分位置的,但是“时间属性值”有点不同,浏览器会根据先后顺序决定,第一个可以解析为时间的属性值将体现为transition-duration,第二个可以解析为时间的属性值将体现为transition-delay

浏览器支持状况?
* Chrome 2+(-webkit-transition),Firefox3.7+(-moz-transition),Safari 3.1+(-webkit-transition),Opera 10.5+(-o-transition),其他浏览器暂不支持

ReflowRepaint
* Transition执行过程中,同样会产生大量的Reflow和Repaint,不过不同的是,这些变化都有一定是按照CSS中定义的运作方式规律的进行,所以浏览器可以预知整个过程的Reflow和Repaint过程,从而对其进行优化处理。(个人猜测,这需要查看webkit源码后再作结论)

正确理解Timing-function
* 这是几个Timing-function曲线图:

* 这是几个默认timing-function的示例:

default »
linear »
ease-in »
ease-out »
ease-in-out »
cubic-bezier »

* 一次“转变”便是一次曲线过程

激发Transition的条件
* 只要为元素指定任意一个以上的transition属性,元素在改变属性值的时候便可执行transition效果,并设其他属性值为初始值,详见上述属性列表。看这个demo:

鼠标移动到元素上方可观察变化效果
XML/HTML代码
  1. <div style="-webkit-transition-duration:2s; width:300px; padding:10px;  
  2. border: 2px solid #ccc; background:#a01000;color:#fff;"  
  3. onmouseover="this.style.width='500px';"  
  4. onmouseout="this.style.width='300px';">  
  5. 鼠标移动到元素上方可观察变化效果  
  6. </div>  

* 值得注意的是,本文不止一次提到,是当“属性值”改变时才会激发transition效果,而不是所有“元素外观”的改变都会激发的,比如设定元素的宽度为百分比,然后改变浏览器大小,元素大小在改变的同时并未发现由transition的效果呈现。请看这两个demo

————————————–邪恶的补充线——————————————

实践中还发现,当元素Layout不可见即display为none时,操作元素为block的同时操作其他可transition属性时,无法激发transition效果。解决办法为,先将元素设为block(或其他可见值),再setTimeout(function(){ /**属性改变代码**/ }, 0),将transition操作提到js操作队列最后执行。//2010-06-01

收尾

嗯,transition就研究到这里吧,文章中有些只是个人臆测的结论,请不要盲目相信,随后我将继续扫一遍webkit中关于transition的源码再给出结论。​

点赞 (0)
  1. 悲剧码农说道:

    就冲那个转的头像,顶个[face_11]

  2. 林肆说道:

    你那个旋转地效果蛮哟意思捏,哈哈,真好玩。

  3. ixwebhosting说道:

    transition这个属性很厉害嘛!

  4. V美推说道:

    可惜有浏览器不支持

  5. 来看看,学习一下。谢谢分享

  6. 写了好多呀,再回去看看去

发表评论

电子邮件地址不会被公开。 必填项已用*标注