javascript - 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 によってトリガーされますが、任意のタイプのトリガーを使用できます。