uni-app h5平滑跳转动画

在uni-app中实现H5页面的平滑跳转动画，可以通过CSS动画和JavaScript的页面跳转逻辑相结合来实现。以下是一个简单的示例，展示如何在uni-app中实现H5页面的平滑跳转动画。

1. 准备页面

假设我们有两个页面：page1.vue 和 page2.vue。

page1.vue

<template>
  <view class="container">
    <button @click="navigateToPage2">Go to Page 2</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToPage2() {
      uni.navigateTo({
        url: '/pages/page2/page2',
        success: function () {
          // 可以在这里触发动画，但由于navigateTo是异步的，动画应该在page2的onLoad中处理
        },
      });
    },
  },
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

page2.vue

<template>
  <view class="container">
    <view class="animated-element"></view>
  </view>
</template>

<script>
export default {
  onLoad() {
    this.startAnimation();
  },
  methods: {
    startAnimation() {
      const animatedElement = this.$el.querySelector('.animated-element');
      animatedElement.style.transition = 'transform 1s ease-in-out';
      animatedElement.style.transform = 'translateY(100px)';
    },
  },
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.animated-element {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translateY(0); /* 初始位置 */
}
</style>

2. 解释

• page1.vue：包含一个按钮，点击按钮时调用navigateToPage2方法，该方法使用uni.navigateTo跳转到page2.vue。
• page2.vue：在onLoad生命周期钩子中调用startAnimation方法，该方法通过CSS transition和transform属性实现平滑的动画效果。

3. 注意事项

• uni.navigateTo是uni-app提供的页面跳转API，适用于H5和小程序等平台。
• 动画效果是在目标页面加载完成后触发的，因此在onLoad生命周期钩子中开始动画。
• 你可以根据需要调整CSS动画属性和值，以实现不同的动画效果。

这个示例展示了基本的平滑跳转动画实现方法，你可以根据实际需求进一步扩展和优化。