如题：
直接上代码
html
<view class="banner">
<image :animation="current==0?showpic:hidepic"
src="https://dalituiwechat.oss-cn-hangzhou.aliyuncs.com/wechat/swiper11.png" mode=""></image>
<image :animation="current==1?showpic:hidepic"
src="https://dalituiwechat.oss-cn-hangzhou.aliyuncs.com/wechat/swiper22.png" mode=""></image>
</view>js部分
需要在date中声明好
current: 0,
hidepic: null,
showpic: null
因为是已进入就开始的，所以 要在生命周期中使用文章来源：https://www.toymoban.com/news/detail-525504.html
var animation = uni.createAnimation({}) //创建一个动画实例
console.log(animation);
//淡入
animation.opacity(1).step({
// delay:1000,
duration: 500
}) //描述动画
this.showpic = animation.export()
//输出动画
//淡出
animation.opacity(0).step({
// delay: 1000,
duration: 1000
})
this.hidepic = animation.export()最后一部别忘了，要给需要淡入淡出的元素或者图片设置绝对定位文章来源地址https://www.toymoban.com/news/detail-525504.html
.banner {
width: 100%;
height: 186rpx;
position: relative;
image {
width: 100%;
height: 100%;
position: absolute;
}
}
到了这里，关于uni-app/微信小程序 实现图片或元素淡入淡出效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
