Kuasa peralihan bernama di vue

Vue.js menyediakan pelbagai cara untuk mengawal bagaimana unsur -unsur atau komponen diberikan secara visual apabila dimasukkan ke dalam DOM, seperti memudar, meluncur masuk, atau kesan visual lain. Hampir semua ciri ini didasarkan pada satu komponen: komponen peralihan .

Contoh mudah ialah v-if berdasarkan nilai boolean. Apabila Boolean benar, elemen itu muncul; Apabila ia palsu, elemen itu hilang. Biasanya, elemen ini muncul dan hilang secara tiba -tiba, tetapi dengan komponen peralihan, anda dapat mengawal kesan visual.

<transition><div v-if="isVisible"> Adakah ia kelihatan?</div></transition>

Banyak artikel memberikan pengenalan yang baik kepada komponen peralihan, seperti Sarah Drasner, Nicolas Udy, dan Hassan Djirdeh. Setiap artikel terperinci aspek yang berbeza dari komponen peralihan VUE. Artikel ini akan memberi tumpuan kepada satu aspek komponen peralihan: mereka boleh "dinamakan".

<transition name="fade"><div v-if="isVisible"> Adakah ia kelihatan?</div></transition>

Perubahan awal yang dibawa oleh harta ini ialah kelas CSS yang disuntik ke dalam elemen semasa urutan peralihan akan diawali dengan nama yang diberikan. Pada asasnya, ia akan menjadi fade-enter dan bukannya v-enter di atas. Harta tunggal ini mempunyai lebih banyak daripada pilihan mudah ini. Ia boleh digunakan untuk memanfaatkan ciri -ciri tertentu VUE dan CSS untuk menghasilkan beberapa hasil yang menarik.

Satu lagi perkara yang perlu dipertimbangkan ialah atribut nama boleh terikat:

<transition :name="currentTransition"><div v-if="isVisible"> Adakah ia kelihatan?</div></transition>

Dalam contoh ini, peralihan akan dinamakan sebagai nilai yang dihuraikan oleh currentTransition . Perubahan mudah ini menyediakan satu lagi lapisan pilihan dan fungsi untuk animasi aplikasi. Menggunakan peralihan penamaan statik dan dinamik, projek-projek boleh mempunyai satu siri peralihan pra-dibina yang sedia untuk digunakan sepanjang aplikasi, boleh memanjangkan komponen yang digunakan untuk peralihan sedia ada mereka, menukar peralihan yang digunakan sebelum atau selepas aplikasi, membolehkan pengguna memilih peralihan, dan mengawal bagaimana unsur-unsur individu peralihan senarai ke tempat berdasarkan keadaan semasa.

Artikel ini bertujuan untuk meneroka ciri -ciri ini dan menerangkan cara menggunakannya.

Apa yang berlaku semasa menamakan peralihan?

Secara lalai, apabila menggunakan komponen peralihan, ia menggunakan kelas tertentu untuk elemen dalam urutan tertentu. Kelas -kelas ini boleh digunakan dalam CSS. Tanpa CSS, kelas -kelas ini sebenarnya tidak memberi kesan kepada unsur -unsur. Oleh itu, CSS sifat ini diperlukan:

 .v-Enter,
.v-leave-to {
  Kelegapan: 0;
}

.v-Enter-Active,
.v-leave-active {
  Peralihan: 0.5s;
}

Ini menyebabkan elemen memudar masuk dan keluar selama setengah saat. Perubahan sedikit kepada peralihan memberikan pengguna maklum balas visual yang elegan. Walau bagaimanapun, masih ada masalah untuk dipertimbangkan. Tetapi pertama, apakah perbezaan antara peralihan penamaan?

 .fade-enter,
.fade-leave-to {
  Kelegapan: 0;
}

.fade-enter-active,
.fade-leave-active {
  Peralihan: 0.5s;
}

Pada dasarnya CSS yang sama, tetapi menggunakan fade- as Prefix dan bukannya v- . Penamaan ini menyelesaikan masalah yang mungkin berlaku apabila menggunakan nama kelas lalai komponen peralihan. Awalan v- sebenarnya menjadikan kelas global, terutamanya apabila meletakkan CSS dalam blok gaya di peringkat akar aplikasi. Ini sebenarnya akan menjadikan * semua * peralihan tanpa atribut nama dalam keseluruhan aplikasi menggunakan kesan peralihan yang sama. Untuk aplikasi yang lebih kecil, ini mungkin cukup, tetapi dalam aplikasi yang lebih besar, lebih kompleks, ini boleh membawa kepada visual yang buruk, kerana tidak semuanya harus pudar masuk dan keluar dalam setengah saat.

Peralihan penamaan menyediakan pemaju dengan tahap kawalan sepanjang projek mereka tentang cara memasukkan secara visual atau memadam elemen atau komponen yang berbeza. Adalah disyorkan agar semua peralihan dinamakan - walaupun hanya satu - untuk membangunkan kebiasaan berbuat demikian. Walaupun aplikasi itu hanya mempunyai satu kesan peralihan, kesan peralihan baru mungkin perlu ditambah pada masa akan datang. Peralihan sedia ada telah dinamakan dalam projek, yang memudahkan usaha untuk menambah peralihan baru.

Membina satu set kesan peralihan

Peralihan menamakan menyediakan proses yang mudah tetapi sangat berguna. Amalan biasa mungkin untuk mewujudkan kelas peralihan sebagai sebahagian daripada komponen yang menggunakannya. Jika satu lagi amalan biasa gaya komponen scoped selesai, kelas -kelas ini hanya akan tersedia untuk komponen tertentu. Jika dua komponen yang berbeza mempunyai peralihan yang sama dalam blok gaya mereka, maka kami hanya mengulangi kod tersebut.

Oleh itu, mari kita pertimbangkan untuk mengekalkan CSS peralihan dalam blok gaya direktori akar aplikasi, biasanya fail app.vue . Dalam kebanyakan projek saya, saya meletakkannya di bahagian terakhir blok gaya untuk mencari pelarasan dan tambahan. Simpan CSS di lokasi ini supaya kesan peralihan boleh digunakan untuk setiap penggunaan komponen peralihan sepanjang aplikasi. Berikut adalah beberapa contoh dari beberapa projek saya.

 .fade-enter,
.fade-leave-to {opacity: 0; }
.fade-enter-active,
.fade-leave-active {peralihan: 0.5S; }

.slide-enter {
  Kelegapan: 0;
  Transform: SCALE3D (2, 0.5, 1) Translate3D (400px, 0, 0);
}

.slide-enter-to {transform: scale3d (1, 1, 1); }
.Slide-Enter-Active,
.slide-leave-active {Transition: 0.5S Cubic-bezier (0.68, -0.55, 0.265, 1.55); }
.slide-leave {transform: scale3d (1, 1, 1); }

.slide-leave-to {
  Kelegapan: 0;
  Transform: SCALE3D (2, 0.5, 1) Translate3D (-400px, 0, 0);
}

.Rotate-Enter {transform: perspektif (500px) berputar3d (0, 1, 0, 90deg); }
.Rotate-Enter-Active,
.Rotate-Leave-Active {Transition: 0.5S; }
.Rotate-leave-to {transform: perspektif (500px) berputar3d (0, 1, 0, -90deg); }

Bergantung pada keutamaan dan keperluan projek anda, terdapat beberapa cara untuk menyimpan kelas peralihan ini. Yang pertama, seperti yang disebutkan sebelumnya, adalah untuk menyelamatkan segala -galanya dalam blok gaya fail app.vue . Anda juga boleh menyimpan semua bahagian sass yang beralih projek dalam folder aset projek dan mengimportnya ke dalam blok gaya aplikasi.

 @import "aset/_transitions.scss";

Kaedah ini membolehkan tweaking dan menambah koleksi peralihan di luar fail VUE. Satu lagi manfaat dari persediaan ini ialah jika projek itu berkongsi kesan peralihan, anda boleh dengan mudah memindahkan fail tersebut antara projek. Sekiranya projek mendapat peralihan baru, mudah untuk memindahkan kandungan tambahan ke projek lain tanpa menyentuh fail projek utama.

Jika anda menggunakan CSS dan bukannya SASS, anda boleh memasukkan fail sebagai kebergantungan untuk projek anda. Anda boleh melakukan ini dengan menyimpan fail dalam folder aset projek anda dan meletakkan pernyataan require dalam fail main.js

 memerlukan ("@/aset/peralihan.css");

Pilihan lain adalah untuk menyimpan gaya peralihan dalam fail CSS statik, yang boleh disimpan di tempat lain, sama ada dalam folder awam projek, atau secara langsung pada pelayan. Oleh kerana ini adalah fail CSS biasa, tidak perlu membina atau menggunakan - hanya termasuk rujukan pautan dalam fail index.html .

<link href="/css/transitions.css" rel="stylesheet" type="text/css">

Fail ini juga boleh disimpan dalam CDN untuk berkongsi semua projek. Setiap kali fail dikemas kini, perubahan itu segera tersedia di semua tempat di mana ia dirujuk. Jika nama peralihan baru dibuat, projek sedia ada boleh mula menggunakan nama baru yang diperlukan.

Sekarang, mari kita perlahan selama satu minit

Apabila kita membina koleksi peralihan untuk digunakan sepanjang projek kami, mari kita pertimbangkan pengguna yang mungkin tidak mahu animasi terlalu tiba -tiba atau tidak mahu animasi muncul sama sekali. Sesetengah mungkin berfikir animasi kami terlalu dibesar -besarkan dan tidak perlu, tetapi bagi sesetengah orang, mereka sebenarnya boleh menimbulkan masalah. Beberapa ketika dahulu, WebKit memperkenalkan pertanyaan media prefers-reduced-motion untuk membantu menyelesaikan kemungkinan halangan spektrum vestibular . Eric Bailey juga mencatatkan pengenalan yang baik kepada pertanyaan media.

Dalam kebanyakan kes, sangat mudah untuk mempunyai pertanyaan media sebagai sebahagian daripada set peralihan kami dan harus dipertimbangkan. Kita boleh mengurangkan jumlah latihan yang terlibat dalam peralihan untuk mengurangkan kesan negatif, atau hanya mematikannya.

Berikut adalah contoh mudah dari salah satu demo saya:

 .Next-Enter {
  Kelegapan: 0;
  Transform: SCALE3D (2, 0.5, 1) Translate3D (400px, 0, 0);
}

.next-enter-to {transform: scale3d (1, 1, 1); }
.next-enter-active,
.Next-Leave-Active {Transition: 0.5S Cubic-bezier (0.68, -0.55, 0.265, 1.55); }
.Next-Leave {Transform: Scale3D (1, 1, 1); }

.next-leave-to {
  Kelegapan: 0;
  Transform: SCALE3D (2, 0.5, 1) Translate3D (-400px, 0, 0);
}

/* Gunakan peralihan yang lebih mudah jika animasi dikurangkan pada tahap sistem operasi*/
@media skrin dan (lebih suka-dikurangkan-gerakan: mengurangkan) {
  .Next-Enter {
    Kelegapan: 0;
    Transform: Translate3D (100px, 0, 0);
  }

  .next-enter-active,
  .NEXT-LEAVE-ACTIVE {peralihan: 0.5S; }

  .next-leave-to {
    Kelegapan: 0;
    Transform: Translate3D (-100px, 0, 0);
  }
}

Dalam contoh ini, saya mengambil peralihan yang agak dibesar -besarkan dan menjadikannya lebih mudah. Animasi adalah animasi gelongsor yang bergerak ke kiri dengan kesan pelonggaran elastik, kemudian mengecil dan memudar apabila dikeluarkan. Sekiranya keutamaan gerakan yang dikurangkan seseorang ditetapkan, animasi menjadi peralihan yang lebih mudah, dengan jarak yang lebih pendek (yang menjadikannya lebih perlahan) dan terus memudar. Jika kita mahu mematikannya, kita hanya perlu merujuk kepada kelas dengan atribut transition dan menetapkan nilai mereka kepada none .

Untuk menguji ini, anda perlu mencari dan memilih kotak semak pada sistem pengendalian masing -masing. Pada Windows, anda boleh menemuinya di<kbd>控制面板> 易于访问中心> 使计算机更容易查看</kbd>; Cari "Tutup semua animasi yang tidak perlu (jika boleh).". Pada Mac, periksa<kbd>系统偏好设置> 辅助功能> 显示</kbd>; Cari "Kurangkan Sukan". Peranti iOS terkini mempunyai tetapan yang sama di bawah<kbd>辅助功能</kbd>.

Mari simpan set peralihan yang fleksibel

Dengan set peralihan ini, mungkin ada masalah dengan ketidakcekapan. Sebagai contoh, bagaimana jika elemen memerlukan masa pudar yang lebih perlahan? Dengan mengandaikan segala-galanya dalam kesan boleh ditinggalkan tidak berubah, hanya ubah transition-duration . Ada cara untuk menyesuaikan diri tanpa membuat nama peralihan yang baru.

Cara paling mudah ialah menggunakan gaya dalam talian secara langsung pada unsur -unsur dalam komponen peralihan.

<transition name="fade"><div style="transition-duration: 6s;" v-if="isVisible"> Ini mempunyai tempoh yang berbeza</div></transition>

Perubahan sedemikian boleh dilakukan melalui pelbagai kaedah pengendalian gaya dan kelas yang disediakan oleh VUE.

Katakan anda menggunakan elemen komponen dengan is untuk melakukan komponen dinamik, sebagai contoh:

<transition mode="out-in" name="fade"><component :is="currentComponent"></component></transition>

Walaupun dengan komponen dinamik ini, kami mempunyai pilihan untuk menyesuaikan sifat -sifat kesan peralihan. Begitu juga, kita boleh menggunakan gaya sebaris pada elemen komponen, yang akan diletakkan pada elemen akar komponen. Unsur akar juga menerima kelas peralihan, jadi kami akan terus menimpa sifatnya.

<transition mode="out-in" name="fade"><component :is="currentComponent" style="transition-duration: 6s;"></component></transition>

Pilihan lain adalah untuk lulus prop ke komponen kami. Dengan cara ini, perubahan yang diperlukan boleh digunakan untuk elemen akarnya melalui kod komponen.

<transition mode="out-in" name="fade"><component :is="currentComponent" duration="6s"></component></transition>

<template><div :style="`transition-duration: ${duration}`"> Komponen satu</div></template>
<script>
export default {
  name: "component-one",
  props: {
    duration: String
  }
};
</script>

Kita juga boleh mengatasi sifat -sifat kelas peralihan di dalam blok gaya komponen, terutamanya apabila dalam skop mereka.

 .fade-enter-active,
.fade-leave-active {peralihan-jangkauan: 1S; }

Dalam kes ini, tempoh pudar komponen akan menjadi satu saat, dan bukannya tempoh global setengah saat. Kita juga boleh melangkah lebih jauh dan menetapkan tempoh yang berbeza untuk setiap sisi urutan.

 .Fade-Enter-active {peralihan-jangkauan: 1S; }
.fade-leave-active {peralihan-jangkauan: 2S; }

Mana -mana kelas peralihan global boleh diubah dalam komponen seperti yang diperlukan. Walaupun ini tidak fleksibel seperti perubahan sifat di luar struktur kelas, ia masih sangat berguna dalam beberapa kes.

Seperti yang dapat anda lihat, walaupun dengan koleksi peralihan prebuilt kami, kami masih mempunyai pilihan untuk menjadi fleksibel.

Peralihan dinamik

Walaupun selepas kita dapat melakukan semua perkara yang menarik ini dengan komponen peralihan Vue, satu lagi ciri menarik masih menunggu untuk diterokai. Harta nama pada komponen peralihan boleh dinamik, bermakna kita boleh mengubah peralihan yang sedang digunakan pada kehendak.

Ini bermakna peralihan boleh diubah mengikut situasi yang berbeza dalam kod untuk mempunyai kesan animasi yang berbeza. Sebagai contoh, kita boleh menukar peralihan berdasarkan jawapan kepada soalan, tentukan peralihan berdasarkan interaksi pengguna, dan mempunyai senarai menggunakan peralihan yang berbeza berdasarkan keadaan semasa senarai itu sendiri.

Mari lihat tiga contoh ini.

Contoh 1: Tukar peralihan mengikut jawapannya

Dalam contoh ini, kita mempunyai masalah matematik yang mudah untuk dijawab. Pilih dua nombor secara rawak dan kami harus memberikan jumlah mereka. Kemudian klik butang untuk membandingkan jawapan kepada jawapan yang diharapkan. Pemberitahuan kecil akan muncul di atas persamaan yang menunjukkan sama ada jawapannya adalah benar atau palsu. Sekiranya jawapannya betul, pemberitahuan memberikan cadangan mengangguk untuk menunjukkan peralihan positif animasi atas dan ke bawah. Jika jawapan anda tidak betul, pemberitahuan akan bergerak ke kiri dan kanan, menunjukkan gegaran kepala dan penolakan anda.

Logik di belakangnya tidak rumit, dan penetapan peralihan tidak rumit. Ini html:

<transition :name="currentTransition"><div v-if="answerChecked"> {{response}}</div></transition>

Sifatnya agak mudah. Kami mempunyai nama terikat pada peralihan dan kemudian v-if pada div pemberitahuan. Kami juga menggunakan kelas yang benar atau palsu untuk menghiasi pemberitahuan berdasarkan respons.

Inilah CSS peralihan:

 .positive-enter-active {animation: positif 1s; }
@keyframes positif {
  0% {transform: translate3d (0, 0, 0); }
  25% {transform: translate3d (0, -20px, 0); }
  50% {transform: translate3d (0, 20px, 0); }
  75% {transform: translate3d (0, -20px, 0); }
  100% {transform: translate3d (0, 0, 0); }
}

.Negative-Enter-active {animation: negatif 1S; }
@keyframes negatif {
  0% {transform: translate3d (0, 0, 0); }
  25% {transform: translate3d (-20px, 0, 0); }
  50% {transform: translate3d (20px, 0, 0); }
  75% {transform: translate3d (-20px, 0, 0); }
  100% {transform: translate3d (0, 0, 0); }
}

Anda akan melihat bahawa saya menggunakan animasi CSS untuk mencapai ke atas dan ke bawah dan kesan kiri dan kanan.

Berikut adalah beberapa kod JavaScript:

 Kaedah: {
  RandomProblem: fungsi () {
    this.a = math.floor (math.random () * math.floor (10));
    this.b = math.floor (math.random () * math.floor (10));
  },
  semak: fungsi () {
    this.response = this.a this.b === parseInt (this.answer);
    this.answerchecked = true;
    this.currentTransition = this.response? 'positif': 'negatif';
  },
  Reset: fungsi () {
    this.answer = null;
    this.answerchecked = false;
    this.randomproblem ();
  }
}

Berikut adalah kaedah randomProblem untuk menetapkan persamaan kami. Kaedah check menentukan kesan peralihan yang digunakan berdasarkan membandingkan jawapan yang disediakan dengan jawapan yang betul. Kemudian ada kaedah reset mudah, yang hanya menetapkan semula segala -galanya.

Ini hanya satu contoh mudah. Satu lagi contoh yang mungkin adalah pemberitahuan dengan dua kesan yang berbeza bergantung kepada sama ada pemberitahuan itu penting atau tidak. Sekiranya mesej itu tidak begitu penting, maka kita boleh menggunakan animasi halus yang tidak akan membiarkan mata pengguna meninggalkan tugas semasa. Jika penting, kita boleh menggunakan lebih banyak animasi langsung untuk memaksa mata untuk mencari pemberitahuan.

Contoh 2: Tukar peralihan berdasarkan interaksi pengguna

Satu lagi perkara yang boleh kita bina adalah semacam karusel. Ini boleh menjadi persembahan slaid, galeri gambar, atau satu siri arahan. Idea asas ialah kita perlu membentangkan maklumat kepada pengguna mengikut urutan. Dalam demonstrasi ini, pengguna boleh membuat keputusan untuk meneruskan dan sama ada untuk bergerak ke hadapan atau ke belakang.

Ini juga persediaan yang agak mudah. Contoh ini lebih kurang kes jenis persembahan slaid. Kedua -dua butang di bahagian bawah bertukar antara dua komponen dengan peralihan gelongsor. Projek sebenar akan mempunyai lebih banyak komponen, atau boleh mengubah logik kandungan komponen, bergantung kepada slaid semasa. Contoh ini akan disimpan mudah untuk menunjukkan idea itu.

Ini html:

<transition :name="currentTransition" mode="out-in"><component :is="slides[currentSlide]"></component></transition>

Anda akan melihat bahawa apabila komponen dihidupkan melalui pengikatan is atribut pada elemen komponen, kami hanya membuat peralihan.

Ini adalah CSS:

 .Next-Enter {
  Kelegapan: 0;
  Transform: SCALE3D (2, 0.5, 1) Translate3D (400px, 0, 0);
}

.next-enter-to {transform: scale3d (1, 1, 1); }
.next-enter-active,
.Next-Leave-Active {Transition: 0.5S Cubic-bezier (0.68, -0.55, 0.265, 1.55); }
.Next-Leave {Transform: Scale3D (1, 1, 1); }

.next-leave-to {
  Kelegapan: 0;
  Transform: SCALE3D (2, 0.5, 1) Translate3D (-400px, 0, 0);
}

.prev-Enter {
  Kelegapan: 0;
  Transform: SCALE3D (2, 0.5, 1) Translate3D (-400px, 0, 0);
}

.prev-enter-to {transform: scale3d (1, 1, 1); }
.prev-enter-active,
.prev-leave-active {peralihan: 0.5S padu-bezier (0.68, -0.55, 0.265, 1.55); }
.prev-leave {transform: scale3d (1, 1, 1); }

.prev-leave-to {
  Kelegapan: 0;
  Transform: SCALE3D (2, 0.5, 1) Translate3D (400px, 0, 0);
}

/* Gunakan peralihan yang lebih mudah jika animasi dikurangkan pada tahap sistem operasi*/
@media skrin dan (lebih suka-dikurangkan-gerakan: mengurangkan) {
  .Next-Enter {Opacity: 0; Transform: Translate3D (100px, 0, 0); }
  .next-enter-active,
  .NEXT-LEAVE-ACTIVE {peralihan: 0.5S; }
  .next-leave-to {opacity: 0; Transform: Translate3D (-100px, 0, 0); }

  .prev-Enter {opacity: 0; Transform: Translate3D (-100px, 0, 0); }
  .prev-enter-active,
  .prev-leave-active {peralihan: 0.5s; }
  .prev-leave-to {opacity: 0; Transform: Translate3D (100px, 0, 0); }
}

Di sini kita mempunyai dua peralihan, satu untuk butang "Seterusnya" apabila pengguna mengklik butang "Seterusnya" dan yang lain untuk butang "Prev". Setiap pada dasarnya menggunakan sifat transform untuk meluncurkan komponen ke arah yang sesuai, tetapi terdapat beberapa tambahan untuk membuat kesan memerah untuk kesan kartun. Kami juga menggunakan prefers-reduced-motion untuk mengubah animasi ke kesan pudar yang lebih mudah dan sapu sedikit ke arah yang betul.

Sekarang, untuk JavaScript:

 Kaedah: {
  perubahan: fungsi (dir) {
    this.currentslide = dir === 'seterusnya'? this.currentslide 1: this.currentslide - 1;
    this.currentTransition = dir;
  }
}

Setiap butang memanggil kaedah changeSlide pada acara kliknya dan melepasi arah yang diwakilinya. Kemudian kami mempunyai beberapa logik untuk mengesan slaid semasa. Kawalan kod talian tunggal yang peralihan digunakan. Oleh kerana butang "seterusnya" berlalu "seterusnya" sebagai arahan, ia sepadan dengan peralihan "seterusnya" dalam CSS. Begitu juga dengan butang "Sebelum". Setiap kali pengguna mengklik butang, aplikasi secara automatik mengetahui peralihan yang digunakan. Oleh itu, kami mempunyai kesan peralihan yang baik yang dapat memberikan konteks mengenai arah yang pengguna sedang menuju ke urutan.

Contoh 3: Tukar peralihan berdasarkan status senarai

Untuk contoh terakhir kami, kami akan belajar bagaimana menukar peralihan berdasarkan keadaan semasa senarai dalam komponen transition-group . Idea di sini adalah senarai, setiap kali item dikemas kini, setiap kali menggunakan peralihan yang berbeza.

Dalam contoh ini, kami menunjukkan senarai bandar di sebelah kanan dan senarai kosong di sebelah kiri. Apabila memilih bandar di sebelah kanan, mereka mengisi kekosongan di sebelah kiri. Bandar pertama slaid dari atas sambil memudar ke dalam pandangan. Bandar seterusnya sebelum bandar terakhir akan meluncur dari kanan atau kiri, bergantung kepada peralihan sebelumnya, bandar terakhir akan meluncur dari bawah.

Ini html:

<transition-group :name="currentListTransition" tag="ul"><li :key="item" v-for="(item, index) in selectedItems"> {{item}}</li></transition-group>

Seperti biasa, persediaan yang agak mudah. Berikut adalah peralihan dalam CSS:

 .top-enter-active,
.top-leave-active {peralihan: 0.5s; }
.top-enter,
.top-leave-to {
  Kelegapan: 0;
  Transform: Translate3D (0, -40px, 0);
}

.top-move {
  Kelegapan: 0.5;
  Peralihan: 0.5s;
}

.Left-Enter-Active,
.Left-Leave-Active {Transition: 0.5S; }
.Left-Enter,
.left-leave-to {
  Kelegapan: 0;
  Transform: Translate3D (-40px, 0, 0);
}

.Left-move {
  Kelegapan: 0.5;
  Peralihan: 0.5s;
}

.Right-Enter-Active,
.Right-Leave-Active {Transition: 0.5S; }
.Right-Enter,
.Right-leave-to {
  Kelegapan: 0;
  Transform: Translate3D (40px, 0, 0);
}

.right-move {
  Kelegapan: 0.5;
  Peralihan: 0.5s;
}

.bottom-enter-active,
.bottom-leave-active {peralihan: 0.5S; }
.bottom-enter,
.bottom-leave-to {
  Kelegapan: 0;
  Transform: Translate3D (0, 30px, 0);
}

.bottom-move {
  Kelegapan: 0.5;
  Peralihan: 0.5s;
}

/* Jika animasi dikurangkan pada tahap sistem operasi, tutup peralihan*/
@media skrin dan (lebih suka-dikurangkan-gerakan: mengurangkan) {
  .top-enter-active,
  .top-leave-active {transition: none; }
  .top-move {transition: none; }
  .Left-Enter-Active,
  .Left-Leave-Active {Transition: none; }
  .Left-Move {Transition: none; }
  .Right-Enter-Active,
  .Right-Leave-Active {Transition: none; }
  .right-move {transition: none; }
  .bottom-enter-active,
  .bottom-leave-active {transition: none; }
  .bottom-move {transition: none; }
}

Seperti yang anda lihat, setiap arah bandar yang mungkin muncul dalam senarai kosong dengan peralihan.

Sekarang, untuk JavaScript kami:

 Kaedah: {
  Choosecity: fungsi (indeks) {
    biarkan selectedLength = this.selectedItems.length;
    biarkan CityLength = this.cities.length;
    biarkan clt = this.currentListTransition;

    jika (selectedLength === 0) {
      clt = 'atas';
    } else if (SelectedLength> 0 && SelectedLength <citieslength clt="clt" else this.currentlisttransition="clt;" this.selecteditems.push this.cities.splice><p> Kaedah <code>chooseCity</code> mengendalikan apa yang berlaku apabila memilih setiap bandar. Apa yang kita bimbang adalah satu siri <code>if</code> dan <code>if/else</code> di tengah -tengah kaedah. Apabila sebuah bandar dipilih, logik melihat panjang semasa array <code>selectedItems</code> yang akhirnya menolak bandar yang dipilih. Jika panjangnya sifar, maka itu adalah bandar pertama, jadi peralihan harus membuatnya masuk dari atas. Jika panjang antara sifar dan jumlah senarai bandar, peralihan harus betul atau kiri. Arah baru yang digunakan adalah berdasarkan arah arah peralihan sebelumnya. Kemudian, akhirnya, jika kita memilih bandar terakhir, ia akan berubah ke peralihan bawah. Sekali lagi, kami menggunakan <code>prefers-reduced-motion</code> , yang sepenuhnya menutup peralihan dalam kes ini.</p>
<p> Pilihan lain untuk menukar peralihan senarai adalah untuk membuat perubahan berdasarkan jenis item yang dipilih; Sebagai contoh, Pantai Timur dan Bandar Pantai Barat, setiap bandar mempunyai peralihan yang berbeza. Pertimbangkan untuk menukar peralihan berdasarkan bilangan item semasa yang ditambahkan ke dalam senarai; Sebagai contoh, peralihan yang berbeza untuk setiap lima item.</p>
<h3 id="Selamat-tinggal-terima-kasih-atas-semua-peralihan"> Selamat tinggal, terima kasih atas semua peralihan</h3>
<p> Selepas semua contoh dan idea ini, saya harap anda akan mempertimbangkan untuk memanfaatkan komponen peralihan Vue dalam projek anda sendiri. Terokai kemungkinan menambah peralihan dan animasi ke aplikasi anda untuk memberikan konteks dan kepentingan kepada pengguna anda. Dalam banyak kes, penambahan sedemikian sangat mudah dilaksanakan, hampir ke titik di mana ia adalah kasihan untuk tidak menambahnya. Vue menyediakan ciri luar kotak yang menarik dan sangat berguna, komponen peralihan, yang saya hanya boleh menggalakkan.</p>
<p> sorakan.</p></citieslength>

Atas ialah kandungan terperinci Kuasa peralihan bernama di vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!