Implementation of javascript fade-in and fade-out effect

Such as the question, only the idea, no code.

This idea is something I want to understand when I recently wrote XScroll. js classes. The Fade-in and fade-out effect is generally divided into two parts: fade-in and fade-out. However, after analysis, I think it takes only half of it.

For example, if you write an image switching class, the switching effect is fade-in and fade-out. We usually write the following: when switching occurs, the currently displayed image fades out (gradually hidden ), the animation speed of the two images is usually the same, so that the current image is completely hidden when the next image is completely displayed.

Let's list a simple step:

The current image fades in, and the transparency changes from 100% to 90%. At the same time, the next image fades in, and the transparency changes from 0 to 10.
The transparency of the current image is 80%, and the transparency of the next image is 20%.
The current figure is 70%, and the next figure is 30%.
....
Current figure 10%, next figure 90%
Switch complete
In fact, this is a waste!

Let's think about it. If the zIndex of the next graph is located on the top of the current graph, as it gradually becomes more and more opaque, the current image at its lower layer will become more and more transparent visually!

For example, when the transparency of the next image is 20%, the transparency of the current image is 100%-20% = 80%!

Therefore, when creating a fade-in and fade-out switching effect, you only need to fade-in the effect, while fade-out occurs. When fade-In ends, it means fade-out ends. In this way, you never have to worry about the synchronization between fade-in and fade-out.

The key is to set the transparency (that is, the next image) of an image in a loop at the same time, without the need to block the image (that is, the current image), saving half of the operation. Does this optimize the execution efficiency of javascript?

Therefore, my idea for implementing the switching effect of Fade-in and fade-out is:

Set zIndex of the next image to the current image
The next image is fade-in (Fade-in). The current image is not operated.
Fade-In occurs. Fade-In completes, and fade-out completes at the same time.
Note: This idea is only applicable to the overlap between the current graph and the next graph (most of the time ).