Symptom:

The stack component is stacked with two image components. The image component is animated to hide the image from 1-0, and the image component is displayed. The previous image will flash and then disappear.

The problem code is as follows:

<template> <div class="page-wrapper"> <input type="button" class="button" onclick="onCallAnimationClick" "> < span style="width:400px; height:400px"> <image class="img" id="img1" src="{{imgUrl}}" oncomplete="imgcomplete"></image> <image class="img" id="img2" if="{{ximg}}" src="{{preUrl}}" oncomplete="imgcomplete2" style="{{'opacity:' + preop + '; '}}"></image> </stack> </div> </template> <script> export default { data: { imgsrc: [" https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1603365312, & FM = 26 & gp = 0. 3218205429 JPG ", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.aiimg.com%2Fuploads%2Fuserup%2F0909%2F2Z64022L38.jpg&refer=ht Tp%3A%2F%2Fimg.aiimg.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1611368024 & 879 ac47e0bd97e413b5462946d9a t = e4ed", "Https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.16pic.com%2F00%2F01%2F11%2F16pic_111395_b.jpg&refer=http%3A% 2 f%2fpic3.16pic.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1611368024 & 70 c702a55248113dafa6e243dc253625 t =" . "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg&r Efer=http%3A%2F%2Fa2.att.hudong.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1611368024 & 11199190 c6ac8e337 t = 1 f16d7568d40daa ", "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897, & FM = 26 & gp = 0. 1268118658 JPG", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F92%2F04%2F01000000000000119090475560392.jpg&r Efer=http%3A%2F%2Fa3.att.hudong.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1611368024 & b33c5b006bcba88a t = 3 24d03cfbca1ad20", "https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9c16fdfaaf51f3de9ba8ee1194eef01f3a2979a8.jpg", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa1.att.hudong.com%2F62%2F02%2F01300542526392139955025309984.jpg&r Efer=http%3A%2F%2Fa1.att.hudong.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1611368024 & 6500 d50b1680d27bb t = 60fe044e90ce41b", ], imgUrl:'', preUrl:'', ximg:true, preop:0, i:0 }, onInit: function () { this.imgUrl = this.imgsrc[0] }, onCallAnimationClick() { if(this.i > 6){ this.i = 0 ; this.imgUrl = this.imgsrc[this.i] }else{ this.i++ this.imgUrl = this.imgsrc[this.i] } console.log('imgcomplete=',this.i)  }, imgcomplete(){ console.log('imgcomplete 1') this.preop = 1 var options = { duration: 500, easing: 'linear', delay: 0, fill: 'forwards', iterations: 1 } var frames = [{ opacity: 1 }, { opacity: 0 }]; var animation = this.$element('img2').animate(frames, options); animation.play(); var self = this animation.onfinish = function () { console.log("imgcomplete animation onfinish"); self.ximg = false self.preop = 0 setTimeout(() => { self.ximg = true self.preUrl = self.$element("img1").attr.src }, 30); } }, imgcomplete2() { console.log('imgcomplete 2') setTimeout(() => { this.preop = 1 }, 50); }, } </script> <style> .page-wrapper { flex-direction: column; justify-content: center; align-items: center; } .img{ width:100%; height:100%; } .button { color: #20a0ff; background-color: #ffffff; padding: 10px 20px; border: 1px solid #20a0ff; border-radius: 40px; } </style>Copy the code

Problem analysis:

The above code uses the two image components to achieve the fade in and fade out animation effect when switching images, mainly through transparency. The opacity is set in the CSS for the second image, but the imgComplete () method animates the image component with the opacity value from 1 to 0, and the code sets the transparency variable preop bound in the CSS to 1.

This happens when the animation method finishes before the CSS.

Solution:

Style =”{{‘opacity:’ + preop + ‘; ‘}} ‘is removed and is called by animation style instead, changing from 0 to 1.

Modify the code as follows:

<template> <div class="page-wrapper"> <input type="button" class="button" onclick="onCallAnimationClick" "> < span style="width:400px; height:400px"> <image class="img" id="img1" src="{{imgUrl}}" oncomplete="imgcomplete"></image> <image class="img" id="img2" if="{{ximg}}" src="{{preUrl}}" oncomplete="imgcomplete2" ></image> </stack> </div> </template> <script> export  default { data: { imgsrc: [" https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1603365312, & FM = 26 & gp = 0. 3218205429 JPG ", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.aiimg.com%2Fuploads%2Fuserup%2F0909%2F2Z64022L38.jpg&refer=ht Tp%3A%2F%2Fimg.aiimg.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1611368024 & 879 ac47e0bd97e413b5462946d9a t = e4ed", "Https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.16pic.com%2F00%2F01%2F11%2F16pic_111395_b.jpg&refer=http%3A% 2 f%2fpic3.16pic.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1611368024 & 70 c702a55248113dafa6e243dc253625 t =" . "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg&r Efer=http%3A%2F%2Fa2.att.hudong.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1611368024 & 11199190 c6ac8e337 t = 1 f16d7568d40daa ", "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897, & FM = 26 & gp = 0. 1268118658 JPG", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F92%2F04%2F01000000000000119090475560392.jpg&r Efer=http%3A%2F%2Fa3.att.hudong.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1611368024 & b33c5b006bcba88a t = 3 24d03cfbca1ad20", "https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9c16fdfaaf51f3de9ba8ee1194eef01f3a2979a8.jpg", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa1.att.hudong.com%2F62%2F02%2F01300542526392139955025309984.jpg&r Efer=http%3A%2F%2Fa1.att.hudong.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1611368024 & 6500 d50b1680d27bb t = 60fe044e90ce41b", ], imgUrl:'', preUrl:'', ximg:true, preop:0, i:0 }, onInit: function () { this.imgUrl = this.imgsrc[0] }, ... {console.log('imgcomplete 2') var options = {duration: 10, easing: 'linear', delay: 0, fill: 'forwards', iterations: 1 } var frames = [{ opacity: 0 }, { opacity: 1 }]; var animation = this.$element('img2').animate(frames, options); animation.play(); }, } </script>Copy the code

For more details, see:

Quick Application animation:

Developer.huawei.com/consumer/cn…

Apply common styles quickly:

Developer.huawei.com/consumer/cn…

The original link: developer.huawei.com/consumer/cn…

By Mayism