front/pages/transition/page1/page1.vue

<template>
  <view class="page1">
    <!-- 设置图片渐变的效果显示 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      isTransitioning: false, // 控制渐变效果
    };
  },
  mounted() {
    this.startTransition(); // 在组件加载时开始渐变
  },
  methods: {
    startTransition() {
      this.isTransitioning = true;
      // 2秒后跳转到 page2
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/transition/page2/page2'
        });
      }, 4000); // 2000毫秒后跳转
    },
  }
}
</script>

<style lang="scss">
.page1 {
  background-image: url('@/static/transition/page1/pictures/page1.png');
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  flex-direction: column; /* 纵向排列 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  opacity: 0; /* 初始透明度 */
  animation: fadeIn 2s forwards; /* 添加渐变动画 */
}

@keyframes fadeIn {
  from {
    opacity: 0; /* 起始透明度 */
  }
  to {
    opacity: 1; /* 结束透明度 */
  }
}
</style>