Bagaimana untuk melaksanakan animasi lompat penghalaan dalam uniapp

UniApp ialah rangka kerja pembangunan merentas platform yang dibangunkan berdasarkan Vue.js, yang boleh membantu pembangun membina aplikasi merentas platform dengan cepat. Dalam UniApp, animasi lompat laluan adalah keperluan biasa Artikel ini akan memperkenalkan cara melaksanakan animasi lompat laluan dalam UniApp dan menyediakan contoh kod khusus.

UniApp menyediakan pelbagai kaedah lompat laluan, termasuk navigateTo, redirectTo, switchTab, dsb. Kaedah lompatan yang berbeza mungkin mempunyai kesan animasi yang berbeza Kita boleh memilih kaedah lompatan yang sesuai mengikut keperluan untuk mencapai kesan animasi.

Yang berikut menggunakan navigateTo sebagai contoh untuk memperkenalkan cara melaksanakan animasi lompat laluan dalam UniApp.

Mula-mula, konfigurasikan gaya animasi global dalam App.vue, dan panggil gaya ini secara seragam apabila halaman melompat. Anda boleh menambah kod berikut dalam

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

Dalam kod di atas, .page-enter ialah gaya permulaan animasi kemasukan halaman, .page-enter-active ialah gaya akhir bagi animasi masuk halaman;.

Seterusnya, dalam halaman yang perlu dilompat, gunakan komponen Vue untuk membungkus kandungan yang perlu dilompat dan tambahkan kelas animasi padanya.

Andaikan kami mempunyai halaman yang dipanggil detail.vue dengan kandungan berikut:

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

Dalam kod di atas, kami melompat ke halaman Utama melalui uni.navigateTo dalam acara klik butang, dan mencetuskan animasi selepas lompatan berjaya. Untuk mencapai kesan animasi, kami juga menambahkan gaya animasi pada halaman butang.

Di home.vue pada halaman Utama, kami juga perlu menambah gaya animasi dan mencetuskan animasi apabila halaman dimuatkan.

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

Dalam kod di atas, kami mencetuskan kesan animasi dalam fungsi cangkuk kitaran hayat yang dipasang di Halaman Utama.

Dengan konfigurasi di atas, kita boleh mencapai kesan animasi apabila halaman melompat dalam UniApp. Apabila butang lompat diklik, halaman semasa akan meluncur ke kanan dan pudar, manakala halaman baharu akan meluncur masuk dari kanan dan pudar masuk, memberikan pengguna pengalaman melompat yang lancar.

Perlu diingat bahawa dalam projek sebenar, anda boleh mengkonfigurasi kesan animasi mengikut keperluan anda, seperti menukar arah, masa, fungsi pelonggaran, dsb. animasi. Selain itu, UniApp juga menyediakan kaedah lompat laluan lain dan antara muka konfigurasi animasi Pembangun boleh memilih kaedah yang sesuai untuk melaksanakan animasi lompat laluan mengikut keperluan mereka sendiri.

Dokumentasi rujukan: https://uniapp.dcloud.io/api/router?id=navigateto

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan animasi lompat penghalaan dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!