小程序样式淡入淡出效果

小程序切换下一个文章或者页面，淡入淡出效果

// detail.js
getArticleData: function(articleId) {
  // 开始淡出效果
  this.animate('.detail-page', [
    { opacity: 1.0, ease: 'ease-out' },
    { opacity: 0.0, ease: 'ease-out' }
  ], 500, () => {
    // 在淡出动画完成后请求文章数据
    wx.request({
      url: `${apiBaseUrl}/articles/${articleId}`,
      method: 'GET',
      success: (res) => {
        if (res.data.status === 0) {
          const data = res.data.data;
          const articleData = data.current_article;

          // 更新文章数据
          this.setData({
            title: articleData.title,
            htmlContent: articleData.content,
            nextArticleId: data.next_article_id,
            previousArticleId: data.previous_article_id,
          });

          // 开始淡入效果
          this.animate('.detail-page', [
            { opacity: 0.0, ease: 'ease-in' },
            { opacity: 1.0, ease: 'ease-in' }
          ], 500);
        } else {
          // 错误处理
          console.error('获取文章数据失败:', res.data.message);
        }
      },
      fail: (err) => {
        console.error('请求文章数据失败:', err);
      }
    });
  });
}