我在Chrome浏览器和Chromecast中遇到了大图像的不透明度转换问题。
他们工作，但他们是"破烂的"。我的意思是，在过渡期间，我在图像中得到了水平噪声线。
我在Chromecast主屏幕上看到了这项工作，所以它可以干净地完成。我正在以我认为简单、明显的方式做这件事，但显然有一个我没有看到的技巧。
以下是一个简单页面的完整HTML，它演示了这个问题：
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<style>
.opaque {
opacity: 1.0;
transition: opacity 1s linear;
}
.transparent {
opacity: 0.0;
transition: opacity 1s linear;
}
</style>
<title>Opacity transition test</title>
</head>
<body>
<script>
function fadeIn() {
console.log("::fadeIn()");
image = document.getElementById("image");
console.log("image is: " + image);
image.className = "opaque";
};
function fadeOut() {
console.log("::fadeOut()");
image = document.getElementById("image");
console.log("image is: " + image);
image.className = "transparent";
};
</script>
<button onclick="fadeIn()">Fade In</button>
<button onclick="fadeOut()">Fade Out</button>
<br />
<br />
<img id="image" class="opaque" src="image.jpg" />
</body>
</html>
在末尾的第三行中，将"image.jpg"替换为相当大的图像(720 x 1280)的URL。或者在运行HTML时，将一个相当大的名为"image.jpg"的图像放在同一目录中
我尝试过很多变体，但当在Chrome浏览器中运行时，或者当我正在开发的Chromecast自定义接收器中使用此技术时，它们都会显示噪声线。
如果你在浏览器中尝试，一定要使用Chrome查看，因为我尝试过的任何其他浏览器都不会出现这种情况！：-(
任何人在这方面能提供的帮助都将不胜感激。
提前感谢
Jim Renkel
对于一个幻灯片应用程序，我正在做一些类似的事情(在chromecast上)。首先，我使用的是-webkit-transition，而不仅仅是转换，所以我的css有以下
-webkit-transition: opacity 4s ease-in;
你需要把握时间，看看什么对你有意义。我在幻灯片应用程序中做的另一件事是，我有两个<img/>标签，一个是可见的，另一个是隐藏的；我更新了隐藏的一个，完成后，我将前面的一个转换为100透明，使用我显示的转换，将隐藏的那个转换为可见，并保持这样，这样图像的转换和加载就不会干扰。这提供了一个相对不错的过渡。
目前的chromecast设备缺乏某些优化；很多CSS转换都是在软件中完成的。此外，目前缺少双重缓冲；其中很多都在待办事项清单上，我们会找到它们，让这个小小的设备变得更好。