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:
Common Events
https://developer.huawei.com/consumer/en/doc/development/quickApp-References/quickapp-events-0000001123530338
Top comments (0)