Chrome中的不透明度转换 [英] Opacity transitions in Chrome

问题描述

我的测试HTML是：

$

我尝试在Windows中实现Chrome的简单不透明度转换，但似乎无法正常工作。 b
$ b

 < div class =box box-back> 
< / div> 
< div class =box box-front> 
< / div> 
  

我的CSS是：

  div.box {
 position：absolute; 
 top：0; 
 left：0; 
 width：100px; 
 height：75px; 
} 
 div.box-back {
 background-color：yellow; 
} 
 div.box-front {
 background-color：blue; 
 transition：opacity 0.5s ease-in-out; 
 -moz-transition：opacity 0.5s ease-in-out; 
 -webkit-transition：opacity 0.5s ease-in-out; 
 opacity：0; 
} 
 div.box-front：hover {
 opacity：1; 
} 
  

fiddle 这里。

这适用于Mac上的Safari，Firefox和Chrome，但在Windows上的Chrome中， 。这是一个问题还是我的机器？

解决方案

这似乎与chrome 问题451756 以及此问题。

它似乎在Chrome 40.0.2214.115版本中已修复。

I am trying to implement a simple opacity transition for Chrome in Windows but it does not seem to be working.

My test HTML is:

<div class="box box-back">
</div>
<div class="box box-front">
</div>

And my CSS is:

div.box {
    position:absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 75px;
}
div.box-back {
    background-color: yellow;
}
div.box-front {
    background-color: blue;
    transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -webkit-transition: opacity 0.5s ease-in-out;
    opacity: 0;
}
div.box-front:hover {
    opacity: 1;
}

fiddle here.

This works in Safari, Firefox and Chrome on the Mac but in Chrome on Windows it has no effect for me. Is this a problem or is it my machine?

解决方案

This seems to be the same as chromium issue 451756 and the same issue reported in this question.

It appears to be fixed in Chrome version 40.0.2214.115.

这篇关于Chrome中的不透明度转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！