Search code examples
cssrenderingtransitionopacityphonegap

Do images with opacity 0 get rendered?


I was wondering if images with opacity 0 are getting rendered by your phone/ webbrowser. I have an app that creates lots of images rapidly and when I use transition and set my opacity at 0.5 it laggs and when I use opacity 0 it doesn't lagg. So i'm assuming that the images with opacity 0 aren't rendered at all.

javascript code:

     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
     }

Do I need to remove my image with opacity 0 after the transition or isn't it necessary?


Solution

  • Update

    See Callback when CSS3 transition finishes for a complete answer

    Modern web browsers use the GPU to render parts of web pages, especially ones with animation. I would presume your theory is correct as your GPU would have nothing to render when opacity is set to 0.

    I think a better approach to this would be to rather set display:none; on the property when it's not displayed instead of opacity:0.