QuickApps - Issue When Setting the Animation Style of an Image Element

To achieve the image switchover effect, two image elements are stacked. One element's transparency changes from 1 to 0 to gradually disappear, so the other can appear. However, the previous image occasionally flickers and then disappears.

The code where the exception occurs is as follows:

In the preceding code, the switchover effect is implemented by changing the transparency of the two image elements. The transparency is set in CSS of the second image element. However, the transparency animation is configured on this element in the imgcomplete() method. That is, the transparency value changes from 1 to 0. But the transparency variable preop bound to the CSS is set to 1.

This exception occurs when the animation completion time is earlier than the CSS implementation time.

Instead delete style="{{'opacity:' + preop + ';'}}" of the second image element in the template. Instead, change the transparency from 0 to 1 to achieve the effect.

For more information, please visit the following links:

Animations
https://developer.huawei.com/consumer/en/doc/development/quickApp-References/quickapp-api-animate-0000001074264335.

Common Events
https://developer.huawei.com/consumer/en/doc/development/quickApp-References/quickapp-events-0000001123530338