jquery - IE10 のトランジションは、2 つの絶対配置要素では機能しません (例を使用)

Question

基本的に、同じ場所に絶対に配置された 2 つの div があり、不透明度コントロールでそれらをスライドします。

modernizr を使用して、css 遷移のサポートを確認し、Ie8 と Ie9 の Jquery フェードに依存していますが、Ie10 には遷移があるため、それにフォールバックせず、そこでは機能しません。

次の例は、chrome と Ie10 でテストされました。

http://jsfiddle.net/ycheG/

この構造で html/css の大幅な変更を避けたいと考えています。

HTML

<div class="opaque"></div>
<div class="opaque green active"></div>

<button> Toggle</button>
enter code here

CSS

.opaque {
  position: absolute;
  left: 200px;
  width:100px; 
  height:100px; 
  background-color:red; 
  transition: opacity 1s ease-in-out; 
  opacity:0;
}

.opaque.green {
   background-color: green;
}

.opaque.active {
 opacity: 1;
}

JS

$("button").on("click", function(){ 
  $(".opaque").toggleClass("active");
})