uniappでルーティングジャンプアニメーションを実装する方法

UniApp は、Vue.js に基づいて開発されたクロスプラットフォーム開発フレームワークで、開発者がクロスプラットフォーム アプリケーションを迅速に構築できるようにします。 UniApp では、ルート ジャンプ アニメーションは一般的な要件です。この記事では、UniApp でルート ジャンプ アニメーションを実装する方法と具体的なコード例を紹介します。

UniApp は、navigateTo、redirectTo、switchTab などのさまざまなルート ジャンプ メソッドを提供します。ジャンプ方法が異なればアニメーション効果も異なりますので、必要に応じて適切なジャンプ方法を選択してアニメーション効果を実現できます。

以下では、navigateTo を例として、UniApp でルーティング ジャンプ アニメーションを実装する方法を紹介します。

まず、App.vue でグローバル アニメーション スタイルを設定し、ページがジャンプするときにこのスタイルを一律に呼び出します。 App.vue の

.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;
}

上記のコードでは、.page-enter はアニメーションに入るページの開始スタイルで、.page-enter-active はページに入るアニメーション。終了スタイル; .page-leave はページ終了アニメーションの開始スタイル、.page-leave-active はページ終了アニメーションの終了スタイルです。

次に、ジャンプする必要があるページで、Vue の コンポーネントを使用してジャンプする必要があるコンテンツをラップし、それにアニメーション クラスを追加します。

次のコンテンツを含む、detail.vue というページがあるとします。

<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>

上記のコードでは、ボタンのクリック イベントで uni.navigateTo を介してホームページにジャンプします。アニメーションは、ジャンプが成功した後にトリガーされます。アニメーション効果を実現するために、ボタン ページにアニメーション スタイルも追加しました。

ホーム ページの home.vue では、アニメーション スタイルを追加し、ページの読み込み時にアニメーションをトリガーする必要もあります。

<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>

上記のコードでは、ホームページにマウントされたライフサイクル フック関数でアニメーション効果をトリガーしました。

上記の構成により、UniApp でページがジャンプするときのアニメーション効果を実現できます。ジャンプ ボタンをクリックすると、現在のページが右にスライドしてフェードインし、新しいページが右からスライドしてフェードインするため、ユーザーはスムーズにジャンプできます。

実際のプロジェクトでは、アニメーションの方向、時間、イージング機能などの変更など、必要に応じてアニメーション効果を構成できます。さらに、UniApp は他のルート ジャンプ メソッドとアニメーション設定インターフェイスも提供しており、開発者は独自のニーズに応じてルート ジャンプ アニメーションを実装するための適切なメソッドを選択できます。

参考ドキュメント: https://uniapp.dcloud.io/api/router?id=navigateto

以上がuniappでルーティングジャンプアニメーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。