微信小程序图片展示淡入淡出纯WXSS实现，无需使用消耗性能的动画引擎

本文主要是介绍微信小程序图片展示淡入淡出纯WXSS实现，无需使用消耗性能的动画引擎，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 

进入下面小程序可以体验效果：

 

 以下代码的淡入淡出是切换图片的时候动画效果显示的。需要用其他方式，可以基于这个wxss修改即可

原理就是，图片默认样式的opacity 是 0，通过变量改变样式的opacity即可，然后需要有transition: all 1s 这个属性加持

1、WXML

<block wx:for="{{posterList}}" wx:key="index"><view class="{{currentIndex==index?'banner-active':''}}"><image class="pic-g banner-vie" mode="aspectFill" style="z-index: {{index==currentIndex?2:0}};" src="{{item.url}}"></image></view>
</block>

2、wxss 

  .pic-g{position: fixed;width: 100%;}.banner-vie{width: 100%;transition: all 1s;opacity: 0;}.banner-active .banner-vie{width: 100%;transition: all 1s;opacity: 1;}

3、JS

具体的JS事件方式，根据自己的需求处理即可。

以上代码逻辑原理：

        循环多个image 标签

        使用js事件切换到不同的标签

        然后根据索引判断哪个标签使用 显性 class="banner-active"

这篇关于微信小程序图片展示淡入淡出纯WXSS实现，无需使用消耗性能的动画引擎的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---