论坛交流
首页| 办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库 |  Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

用javascript操作CSS3属性实现动画

文章类别：Javascript | 发表日期:2011-9-8 9:39:34
CSS3提供两种方式来实现动画，transition与animation。animation涉及自定义一种为“@keyframes”的东西，这个需要动用到insertRule太复杂了，因此本文跳过它。有人它为transform也算一种，但它是静态的，需要结合transition才能变成动态，因此也跳过。

　　transition主要就是以下四个属性,后面跟着的是它们的初始值

　　transition-property: all;

　　transition-duration: 0s;

　　transition-timing-function: ease;

　　transition-delay: 0s;

　　transition-property的值可以为none,all,或指定上的属性名

　　当前可进行补间的CSS属性(比MDC上的少,去掉许多私有属性与比较罕见的属性)

 

　　transition-duration,动画的持续时间,其值为一个带单位的数值,单位可以为s与ms

　　transition-delay:动画延迟多久开始.

　　transition-timing-function:缓动公式,值为ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )

　　ease

　　This keyword sets the easing function to cubic-bezier(0.25, 0.1, 0.25, 1.0).

　　linear

　　This keyword sets the easing function to cubic-bezier(0.0, 0.0, 1.0, 1.0).

　　ease-in

　　This keyword sets the easing function to cubic-bezier(0.42, 0.0, 1.0, 1.0).

　　ease-out

　　This keyword sets the easing function to cubic-bezier(0.0, 0.0, 0.58, 1.0).

　　ease-in-out

　　This keyword sets the easing function to cubic-bezier(0.42, 0.0, 0.58, 1.0).

　　cubic-bezier

　　Specifies a cubic bezier curve to use as the easing function. The four number values specify the P1 and P2 points of the curve as (x1, y1, x2, y2). All values must be in the range [0.0, 1.0] inclusive.

　　但在JS操作它们时我们其中只需要transition就行了，由于这是浏览器商首先搞出来，因此都带着它们的前缀，如-ms-,-moz-等等，我们需要把它们改成驼峰风格才能调用，见下面的例子。

　　示例1,通过JS来操作这些CSS3属性实现动画效果:

  1.   
  2. <!DOCTYPE html> 
  3. <html> 
  4.   <head> 
  5.     <meta charset="utf-8"> 
  6.     <title>dom Framework</title> 
  7.   <script> 
  8.       var dom = function(s){ 
  9.         return document.getElementById(s) 
  10.       } 
  11.       dom.cssName = function (name){ 
  12.         var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-'], 
  13.         rcap = /-([a-z])/g,capfn = function($0,$1){ 
  14.           return $1.toUpperCase(); 
  15.         }; 
  16.         dom.cssName = function(name, target, test){ 
  17.           target = target || document.documentElement.style; 
  18.           for (var i=0, l=prefixes.length; i < l; i++) { 
  19.             test = (prefixes[i] + name).replace(rcap,capfn); 
  20.             if(test in target){ 
  21.               return test; 
  22.             } 
  23.           } 
  24.           return null; 
  25.         } 
  26.         return dom.cssName(name); 
  27.       } 
  28.       window.onload = function(){ 
  29.         var el = dom("test"), 
  30.         css3transition = dom.cssName("transition"); 
  31.         el.style[css3transition] = "all 5s ease-in" 
  32.         dom("start").onclick = function(){ 
  33.           el.style.width = "400px"; 
  34.         } 
  35.       } 
  36.     
  37.     </script> 
  38.     <style> 
  39.       #test{ 
  40.         background: red; 
  41.         width:10px; 
  42.         height:30px; 
  43.       } 
  44.     </style> 
  45.   </head> 
  46.   <body> 
  47.     <h3>CSS3 动画 by 司徒正美</h3> 
  48.     <div id="test"> 
  49.       TEXT 
  50.     </div> 
  51.     <button id="start" type="button">开始测试</button> 
  52.   </body> 
  53. </html> 

　　示例2,同时操作多个属性的渐变，我们需要用“,”隔开。

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4.     <meta charset="utf-8"> 
  5.     <title>dom Framework</title> 
  6.  
  7.     <script> 
  8.         var dom = function(s){ 
  9.         return document.getElementById(s) 
  10.       } 
  11.       dom.cssName = function (name){ 
  12.         var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-'], 
  13.         rcap = /-([a-z])/g,capfn = function($0,$1){ 
  14.           return $1.toUpperCase(); 
  15.         }; 
  16.         dom.cssName = function(name, target, test){ 
  17.           target = target || document.documentElement.style; 
  18.           for (var i=0, l=prefixes.length; i < l; i++) { 
  19.             test = (prefixes[i] + name).replace(rcap,capfn); 
  20.             if(test in target){ 
  21.               return test; 
  22.             } 
  23.           } 
  24.           return null; 
  25.         } 
  26.         return dom.cssName(name); 
  27.       } 
  28.       window.onload = function(){ 
  29.         var el = dom("test"), 
  30.         css3transition = dom.cssName("transition"); 
  31.         el.style[css3transition] = "width 5s ease-in,height 4s linear" 
  32.         dom("start").onclick = function(){ 
  33.           el.style.width = "400px"; 
  34.           el.style.height = "200px" 
  35.         } 
  36.       } 
  37.  
  38.     </script> 
  39.     <style> 
  40.       #test{ 
  41.         top:1px; 
  42.         background: red; 
  43.         width:10px; 
  44.         height:30px; 
  45.       } 
  46.     </style> 
  47.   </head> 
  48.   <body> 
  49.     <h1>处理多个属性的渐变 by 司徒正美</h1> 
  50.     <div id="test"> 
  51.       TEXT 
  52.     </div> 
  53.     <button id="start" type="button">开始测试</button> 
  54.   </body> 
  55. </html> 

　　新锐浏览器也为此添加了一个事件,当渐变动画结束时,让我们清除渐变属性。不过，这个事件名，非常不规则，webkit系是webkitTransitionEnd，opera是oTransition，FF竟然是transitionend!它们与CSS属性那个大写开头的驼峰风格是不一样的(如WebkitTransition,OTransition,MozTransition)

  1. var transitionEnd = (navigator.vendor && "webkitTransitionEnd") || ( window.opera && "oTransitionEnd") || "transitionend"; 
  2. el.addEventListener(transitionEnd,function(){//IE10 pp3将会支持transition与transform 
  3.             //http://blogs.msdn.com/b/ie/archive/2011/04/12/native-html5-first-ie10-platform-preview-available-for-download.aspx 
  4.      this.style.removeProperty(css3transition.replace( rupper, "-$1" ).toLowerCase());//css3transition即WebkitTransition等 
  5. },true) 

　　支持情况:

　　firefox 4.0

　　chrome 4.0+

　　safari 3.1+

　　opera 10.5+

视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058