微信小程序淡入淡出页面切换效果

微信小程序可以通过动画实现页面切换效果，其中淡入淡出的效果可以通过opacity属性来实现。

首先，在app.wxss中定义以下样式：

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  transition: opacity .5s ease-in-out;
  opacity: 1;
}

.fade-leave {
  opacity: 1;
}

.fade-leave-active {
  transition: opacity .5s ease-in-out;
  opacity: 0;
}

其实就是定义了两个类fade-enter和fade-leave，这两个类控制页面的入场和出场动画。fade-enter-active和fade-leave-active控制动画过渡。

然后在页面的wxml中，可以定义一个动画属性，如下所示：

<view class="fade-enter" animation="{{animationData}}">欢迎页面</view>

接着，控制小程序页面切换时动画的执行，将如下代码copy到js文件相应的位置

onLoad: function () {
  // 动画实例
  this.animation = wx.createAnimation()
},
onShow: function () {
  // 淡入动画
  this.fadeIn()
},
fadeOut: function () {
  // 淡出动画
  this.animation.opacity(0).step()
  this.setData({
    animationData: this.animation.export()
  })
},
fadeIn: function () {
  // 淡入动画
  this.animation.opacity(1).step()
  this.setData({
    animationData: this.animation.export()
  })
}

其中onLoad函数中初始化动画实例，onShow函数中实现页面切换时的动画，fadeIn函数和fadeOut函数分别实现淡入和淡出动画。

这样，在跳转页面时，只需在跳转函数中调用相应的fadeIn和fadeOut函数即可实现淡入淡出效果。

为了获得更好的效果，此处还可以添加一个小小的优化：

onReady: function () {
  setTimeout(() => {
    this.fadeOut()
  }, 2000)
}

即在页面是手动切换时立即执行动画，而在小程序初始化导航栏时，延时2秒执行以免页面一开始就看到淡出动画。

以上就是微信小程序淡入淡出页面切换效果的实现方法了。