是否渲染不透明度为 0 的图像?
Do images with opacity 0 get rendered?
我想知道您的 phone/ 网络浏览器是否正在渲染不透明度为 0 的图像。
我有一个应用程序可以快速创建大量图像并且
当我使用过渡并将我的不透明度设置为 0.5 时,它会滞后,而当我使用不透明度 0 时,它不会滞后。
所以我假设不透明度为 0 的图像根本没有渲染。
javascript代码:
function transitionImage(trans, x, y) { //trans is an image
image.style.transition = "transform 1000ms ease-in, opacity 500ms ease-in 500ms";
image.style.transform="translate("+x+"px, "+y+"px)";
image.style.opacity="0"; //or 0.5
}
我是否需要在过渡后删除不透明度为 0 的图像,或者是否没有必要?
更新
请参阅 Callback when CSS3 transition finishes 以获得完整答案
现代网络浏览器使用 GPU 来呈现部分网页,尤其是带有动画的网页。我认为您的理论是正确的,因为当不透明度设置为 0 时,您的 GPU 将不会渲染任何内容。
我认为更好的方法是在未显示时在 属性 上设置 display:none;
而不是 opacity:0
。
我想知道您的 phone/ 网络浏览器是否正在渲染不透明度为 0 的图像。 我有一个应用程序可以快速创建大量图像并且 当我使用过渡并将我的不透明度设置为 0.5 时,它会滞后,而当我使用不透明度 0 时,它不会滞后。 所以我假设不透明度为 0 的图像根本没有渲染。
javascript代码:
function transitionImage(trans, x, y) { //trans is an image
image.style.transition = "transform 1000ms ease-in, opacity 500ms ease-in 500ms";
image.style.transform="translate("+x+"px, "+y+"px)";
image.style.opacity="0"; //or 0.5
}
我是否需要在过渡后删除不透明度为 0 的图像,或者是否没有必要?
更新
请参阅 Callback when CSS3 transition finishes 以获得完整答案
现代网络浏览器使用 GPU 来呈现部分网页,尤其是带有动画的网页。我认为您的理论是正确的,因为当不透明度设置为 0 时,您的 GPU 将不会渲染任何内容。
我认为更好的方法是在未显示时在 属性 上设置 display:none;
而不是 opacity:0
。