How to implement routing jump animation in uniapp

UniApp is a cross-platform development framework developed based on Vue.js, which can help developers quickly build cross-platform applications. In UniApp, route jump animation is a common requirement. This article will introduce how to implement route jump animation in UniApp and provide specific code examples.

UniApp provides a variety of route jump methods, including navigateTo, redirectTo, switchTab, etc. Different jump methods may have different animation effects. We can choose the appropriate jump method according to needs to achieve animation effects.

The following uses navigateTo as an example to introduce how to implement routing jump animation in UniApp.

First, configure a global animation style in App.vue, and call this style uniformly when the page jumps. You can add the following code in

.page-enter {
  opacity: 0;
  transform: translateX(100%);
}

.page-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.3s;
}

.page-leave {
  opacity: 1;
  transform: translateX(0);
}

.page-leave-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 0.3s;
}

In the above code, .page-enter is the starting style of the page entering animation, and .page-enter-active is the page entering animation. End style; .page-leave is the starting style of the page leaving animation, .page-leave-active is the ending style of the page leaving animation.

Next, in the page that needs to be jumped, use Vue's component to wrap the content that needs to be jumped, and add the animation class to it.

Suppose we have a page called detail.vue with the following content:

<template>
  <view>
    <button @click="jumpToHome">跳转到Home页</button>
  </view>
</template>

<script>
export default {
  methods: {
    jumpToHome() {
      uni.navigateTo({
        url: '/pages/home/home',
        success: () => {
          // 跳转成功后触发动画
          uni.$emit('page-enter');
        }
      });
    }
  }
};
</script>

<style scoped>
.page-enter {
  opacity: 0;
  transform: translateX(100%);
}

.page-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.3s;
}

.page-leave {
  opacity: 1;
  transform: translateX(0);
}

.page-leave-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 0.3s;
}
</style>

In the above code, we jump to the Home page through uni.navigateTo in the click event of the button, and in The animation is triggered after the jump is successful. In order to achieve animation effects, we also added animation styles to the button page.

In home.vue on the Home page, we also need to add animation styles and trigger the animation when the page loads.

<template>
  <transition name="page">
    <view>
      <text>这是Home页</text>
    </view>
  </transition>
</template>

<script>
export default {
  mounted() {
    // 页面加载完成后触发动画
    uni.$emit('page-enter');
  }
};
</script>

<style scoped>
.page-enter {
  opacity: 0;
  transform: translateX(100%);
}

.page-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.3s;
}

.page-leave {
  opacity: 1;
  transform: translateX(0);
}

.page-leave-active {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 0.3s;
}
</style>

In the above code, we triggered the animation effect in the mounted life cycle hook function of the Home page.

Through the above configuration, we can achieve the animation effect when the page jumps in UniApp. When the jump button is clicked, the current page will slide to the right and fade away, while the new page will slide in from the right and fade in, giving users a smooth jumping experience.

It should be noted that in actual projects, you can configure animation effects according to your needs, such as changing the direction, time, easing function, etc. of the animation. In addition, UniApp also provides other route jump methods and animation configuration interfaces. Developers can choose the appropriate method to implement route jump animation according to their own needs.

Reference documentation: https://uniapp.dcloud.io/api/router?id=navigateto

The above is the detailed content of How to implement routing jump animation in uniapp. For more information, please follow other related articles on the PHP Chinese website!