JSでtransitionとtransformを使いたい。activeを指定したい。

Question

前回の続きなのですが、今作っているのはスイッチ（switchArea）を押すとhoge()関数が更新され、スイッチにアニメーションを効かせるものを作成しています。実際translateXとbackgroundは変化するのですが、transitionで指定している0.2秒かけてアニメーションすることができていないです。

コード
function hoge(){
  insertElement += "<div id=\"switchArea\" onclick=\"on_off_B()\">";
  insertElement += "<div id=\"swImg\"></div>";
  insertElement += "</div>";
//以下省略
}

function on_off_B(){
  hoge();

  var sw = document.getElementById("swImg");
  sw.style.transition = "2s";
  sw.style.webkitTransform = "translateX(70px)";
  sw.style.background = "#78bd78";
}

hoge();

調べたところによりますとtransitionは#swImgに指定して、#swImg:hovorなどに変化後のプロパティを指定するといった感じの様です。
今回の場合はクリックした時なので、activeクラスにする必要があると思います。
javascriptでactive化するにはどうしたら良いでしょうか。