0

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?

Daan Seuntjens
  • 880
  • 1
  • 18
  • 37

1 Answers1

1

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.

  • The thing is that I want to let an image fade-out so I can't just set display:none. Is there a way to say after the transition call display:none? – Daan Seuntjens Apr 09 '18 at 13:25
  • Could you update your question to show some more code. Are you triggering the transition with Javascript? Take a look at https://daneden.github.io/animate.css/ –  Apr 09 '18 at 13:34
  • yeah it's javascript, so is there a way to call display:none after the transition is finished in javascript? should I use a timer? – Daan Seuntjens Apr 09 '18 at 13:43
  • Updated my answer, see https://stackoverflow.com/questions/9255279/callback-when-css3-transition-finishes –  Apr 09 '18 at 13:48