Animate css开关

Question

有没有一种方法来动画这个功能？ 所以当它“扩展”在CSS之间切换时，它会缓慢/中等/快速地进行切换。

function changeCssClass(objDivID) 
    { 
     if(document.getElementById(objDivID).className=='normalSize') 
     { 
      document.getElementById(objDivID).className = 'expandedSize'; 
     } 
     else 
     { 
      document.getElementById(objDivID).className = 'normalSize'; 
     } 
    } 

CSS代码：

.normalSize { width:640px; height:360px; } 

.expandedSize { width:1000px; height:480px; } 

Answer 1

这仅仅是东西，所以很容易做到与CSS过渡。使用其他任何东西都是可惜的。这里所说：

function changeCssClass() { 
     if (document.getElementById('objDivID').className == 'normalSize') { 
      document.getElementById('objDivID').className = 'expandedSize'; 
     } else { 
      document.getElementById('objDivID').className = 'normalSize'; 
     } 
    } 

    document.getElementById('objDivID').onclick = function(){ 
     changeCssClass(); 
    } 

和CSS：

#objDivID { 
    -webkit-transition: all 0.2s ease; 
    -moz-transition: all 0.2s ease; 
    -ms-transition: all 0.2s ease; 
    -o-transition: all 0.2s ease; 
    transition: all 0.2s ease; 
} 

http://jsfiddle.net/U8yZ6/

它是由一个onclick触发，但你可以使用任何类型的触发器。