Bagaimana untuk menetapkan animasi apabila menukar komponen dalam uniapp

Dengan perkembangan pesat Internet mudah alih, semakin banyak aplikasi mula mengutamakan pengalaman pengguna. Dalam reka bentuk dan pembangunan, animasi, sebagai salah satu kaedah interaktif, menjadi semakin penting.

Uniapp ialah salah satu rangka kerja pembangunan merentas platform yang lebih popular pada masa ini Ia menyokong pembangunan serentak berbilang platform (seperti program mini WeChat, H5, Aplikasi, dll.), mengurangkan kos dan masa pembangunan. Dalam Uniapp, agak mudah untuk melaksanakan animasi penukaran komponen Mari kita bincangkannya bersama.

1 Gunakan komponen peralihan

Apabila menukar komponen, kita boleh menggunakan komponen peralihan dalam Vue untuk melaksanakan animasi. Komponen peralihan melaksanakan kesan animasi peralihan dengan melaksanakan empat nama kelas CSS berikut:

• .v-enter: berkuat kuasa apabila elemen dimasukkan.
• .v-enter-active: Tentukan keadaan peralihan. Berkuat kuasa apabila elemen dimasukkan dan dikeluarkan sebelum dan selepas proses peralihan selesai.
• .v-enter-to: Baru ditambah dalam versi 2.1.8 dan ke atas. Ia berkuat kuasa apabila elemen dimasukkan dan berkuat kuasa selepas proses peralihan selesai.
• .v-leave: berkuat kuasa apabila elemen dialih keluar.
• .v-leave-active: Tentukan keadaan peralihan. Berkuat kuasa apabila elemen dialih keluar, sebelum dan selepas proses peralihan selesai.
• .v-leave-to: Baru ditambah dalam versi 2.1.8 dan ke atas. Ia berkuat kuasa apabila elemen dialih keluar dan selepas proses peralihan selesai.

Di bawah ini kami menggunakan contoh untuk menunjukkan cara menggunakan komponen peralihan:

<template>
  <div class="container">
    <transition name="fade">
      <div v-if="show">我是一段文字</div>
    </transition>
  </div>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    }
  }
}
</script>

Dalam contoh ini, kami menggunakan arahan v-if dalam Vue untuk memaparkan elemen dan tersembunyi. Jika rancangan itu benar, maka <div v-if="show">我是一段文字</div> akan dipaparkan, jika tidak, ia tidak akan dipaparkan. Pada elemen ini, kami menggunakan komponen peralihan Vue, menetapkan atribut nama kepada "fade", dan menentukan dua nama kelas fade-enter-active dan fade-leave-active untuk menentukan masa dan atribut kesan peralihan. Dalam nama kelas fade-enter dan fade-leave-to, kami menentukan atribut kelegapan elemen supaya elemen mempunyai kesan fade-in dan fade-out apabila ditunjukkan dan disembunyikan.

2. Tentukan kesan peralihan global dalam fail App.vue

Jika kita perlu menggunakan kesan peralihan yang sama dalam keseluruhan aplikasi, kita boleh menentukan kesan peralihan global dalam Apl. komponen fail vue. Berikut ialah contoh melaksanakan kesan peralihan untuk penukaran halaman:

<template>
  <div class="container">
    <transition name="page">
      <router-view></router-view>
    </transition>
  </div>
</template>

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.5s;
}

.page-enter,
.page-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
</style>

Dalam contoh ini, kami menggunakan paparan penghala komponen penghalaan dalam Vue untuk melaksanakan penukaran halaman. Di luar komponen ini, kami menggunakan komponen peralihan dan menetapkan atribut nama kepada "halaman". Pada komponen peralihan ini, kami juga mentakrifkan dua nama kelas page-enter-active dan page-leave-active, yang digunakan untuk menentukan masa dan atribut kesan peralihan. Dalam nama kelas page-enter dan page-leave-to, kami menentukan kelegapan dan mengubah atribut elemen, supaya halaman mempunyai kesan terjemahan dan pudar apabila masuk dan keluar.

3. Gunakan teg Animasi dalam komponen

Selain komponen peralihan, Uniapp juga menyediakan kami cara yang lebih mudah untuk menghidupkan penukaran komponen, iaitu menggunakan teg Animasi. Teg Animasi direka khusus untuk melengkapkan animasi Dengan menetapkan sifat tag, kita boleh menentukan fungsi permulaan, penamat, tempoh dan pelonggaran kesan animasi.

Berikut ialah contoh penggunaan teg Animasi untuk menghidupkan penukaran komponen:

<template>
  <div class="container">
    <animation :name="aniName" :duration="aniDuration">
      <div v-if="show" class="box"></div>
    </animation>
    <button @click="toggleShow()">toggleShow</button>
  </div>
</template>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.move-enter-active {
  animation: move-enter 1s ease-out;
}

.move-leave-active {
  animation: move-leave 1s ease-in;
}

@keyframes move-enter {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes move-leave {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}
</style>

<script>
export default {
  data() {
    return {
      show: true,
      aniName: "",
      aniDuration: 0
    }
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
      this.aniName = this.show ? "move-enter" : "move-leave";
      this.aniDuration = 1000;
    }
  }
}
</script>

Dalam contoh ini, kami menggunakan dua kata kunci <animation> dan <div class="box"></div>. Antaranya, nama dan tempoh animasi ditakrifkan dalam tag Animasi Maklumat ini akan diubah suai apabila butang diklik. Pada elemen kotak, kami menggunakan arahan v-if dalam Vue untuk memaparkan dan menyembunyikan elemen. Di luar elemen kotak, kami mentakrifkan dua nama kelas move-enter-active dan move-leave-active untuk menentukan kesan animasi yang hendak digunakan, dan menetapkan dua bingkai utama move-enter dan move-leave, menetapkan keadaan permulaan dan akhir bagi kesan animasi.

Ringkasan

Di atas adalah tiga kaedah untuk melaksanakan animasi penukaran komponen Mereka masing-masing mempunyai kelebihan dan kekurangan masing-masing Kita boleh memilih kaedah yang sesuai mengikut keperluan projek. Jika anda ingin mengetahui lebih lanjut tentang pembangunan merentas platform, dialu-alukan untuk mengikuti kursus Uniapp untuk mengetahui lebih banyak kemahiran dan kaedah pembangunan!

Atas ialah kandungan terperinci Bagaimana untuk menetapkan animasi apabila menukar komponen dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!