jquery - IE10 上的过渡不适用于两个绝对定位的元素（示例）

Question

基本上我有两个绝对定位在同一个位置的 div，并使用不透明度控件在它们之间滑动。

使用modernizr，我检查了css转换支持并依赖于Ie8和Ie9的Jquery淡入淡出，但Ie10确实有转换，所以它不会回到那个状态，而且它在那里不起作用。

以下示例在 chrome 和 Ie10 上进行了测试

http://jsfiddle.net/ycheG/

我想避免对这个结构进行大量的 html/css 更改，并且如果我不必嗅探它，javascript 后备就足够了。

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");
})

Answer 1

试试这个代码：

transition: opacity 1s ease-in-out; 
-ms-transition: opacity 1s ease-in-out;

这应该适用于 ie10 ，您也可以阅读有关跨浏览器的信息