景象形容：
stack组件下应用两个image组件重叠，一个image组件通过动画款式设置透明度从1-0，暗藏起来，另一张显示进去，从而来实现图片切换，前一张图片会概率性的闪现而后隐没。
问题代码如下：
<template> <div class="page-wrapper"> <input type="button" class="button" onclick="onCallAnimationClick" value="Animation 动画" /> <stack 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,3218205429&fm=26&gp=0.jpg", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.aiimg.com%2Fuploads%2Fuserup%2F0909%2F2Z64022L38.jpg&refer=http%3A%2F%2Fimg.aiimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=879ac47e0bd97e413b5462946d9ae4ed", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.16pic.com%2F00%2F01%2F11%2F16pic_111395_b.jpg&refer=http%3A%2F%2Fpic3.16pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=70c702a55248113dafa6e243dc253625", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg&refer=http%3A%2F%2Fa2.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=11199190c6ac8e3371f16d7568d40daa", "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F92%2F04%2F01000000000000119090475560392.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=3b33c5b006bcba88a24d03cfbca1ad20", "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&refer=http%3A%2F%2Fa1.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=6500d50b1680d27bb60fe044e90ce41b", ], 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>问题剖析：
上述代码用两个image组件实现了图片切换时淡入淡出的动画成果，次要是通过透明度实现的。第二个image的css中设置了透明度，然而imgcomplete()办法中又对该image组件做了透明度动画，透明度值从1到0，同时代码中又将css中绑定的透明度变量preop设置为1。
当动画办法实现工夫先于css，就会呈现这个状况。
解决办法：
template中第二个image组件的style="{{'opacity:' + preop + ';'}}"去掉，改为通过动画款式来调用，从0-1变动。
批改代码如下：
<template> <div class="page-wrapper"> <input type="button" class="button" onclick="onCallAnimationClick" value="Animation 动画" /> <stack 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,3218205429&fm=26&gp=0.jpg", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.aiimg.com%2Fuploads%2Fuserup%2F0909%2F2Z64022L38.jpg&refer=http%3A%2F%2Fimg.aiimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=879ac47e0bd97e413b5462946d9ae4ed", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.16pic.com%2F00%2F01%2F11%2F16pic_111395_b.jpg&refer=http%3A%2F%2Fpic3.16pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=70c702a55248113dafa6e243dc253625", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg&refer=http%3A%2F%2Fa2.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=11199190c6ac8e3371f16d7568d40daa", "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F92%2F04%2F01000000000000119090475560392.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=3b33c5b006bcba88a24d03cfbca1ad20", "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&refer=http%3A%2F%2Fa1.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611368024&t=6500d50b1680d27bb60fe044e90ce41b", ], imgUrl:'', preUrl:'', ximg:true, preop:0, i:0 }, onInit: function () { this.imgUrl = this.imgsrc[0] }, ... //省略 imgcomplete2() { 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>欲了解更多详情，请参见：
快利用动画：
https://developer.huawei.com/...
快利用通用款式：
https://developer.huawei.com/...
原文链接：https://developer.huawei.com/...
原作者：Mayism