I suppose your GUI component has two rectangle views in the background. One is configured with white color and the other with black. Both are opaque, so you see the rectangle lying top (unless you make it invisible).
When running the transition, the opacity of the entire GUI component is modified. Modifying the opacity of the component affects in the practice the opacity of all views embedded inside it. In other words, the both rectangles in the background will become semi-transparent -> both are partially visible. You can see through the rectangle in the front the rectangle in the background.
What can you do?
- Show/Hide the rectangles exclusively. If you show white, hide the black rectangle. Or use one rectangle for both cases and modify its color only.
- If you have sufficient RAM, configure the transition to use the Buffered mode. With this mode the translucent effects are avoided. See also the explanation in Control the visibility of nested components. Buffered mode also helps to optimize the animation.
Does it help you further?