Bagaimana untuk melaksanakan animasi peralihan dalam Vue3? Analisis kaedah perpustakaan komponen dan animasi

Bagaimana untuk melaksanakan animasi peralihan dalam

Vue? Artikel berikut akan memperkenalkan kepada anda dua kaedah untuk melaksanakan animasi peralihan dalam Vue3 (komponen peralihan dan perpustakaan animasi saya harap ia akan membantu anda!

Dalam pembangunan sebenar, untuk meningkatkan pengalaman pengguna, animasi peralihan sering digunakan, dan animasi peralihan dalam CSS adalah melalui transition dan animationTercapai. Dalam Vue, Vue sendiri mempunyai beberapa komponen terbina dalam dan API yang boleh membantu kami mencapai kesan animasi peralihan dengan mudah, mari kita pelajari tentangnya seterusnya.

Komponen peralihan Vue

Vue menyediakan komponen transition, yang boleh menambah elemen secara automatik pada / Meninggalkan kesan peralihan:

• Gunakan v-if pemaparan bersyarat
• Gunakan v-show paparan bersyarat
• Komponen dinamik
• Nod akar komponen

juga agak mudah untuk digunakan. Anda perlu membalut komponen atau elemen yang perlu dianimasikan dengan komponen <transition></transition>, dan kemudian tentukan kumpulan class. [Cadangan berkaitan: tutorial video vue.js]

Tunjuk cara peralihan

Kod berikut menunjukkan penggunaan asas komponen <transition></transition>:

<template>
  <button class="btn btn-primary" @click="helloWorldShow = !helloWorldShow">
    显示与隐藏
  </button>
  <br />
  <img alt="Vue logo" src="./assets/logo.png" />
  <transition>
    <hello-world v-if="helloWorldShow" msg="【一碗周】过渡动画演示demo" />
  </transition>
</template>

<script setup>
import { ref } from &#39;vue&#39;
import HelloWorld from &#39;./components/HelloWorld.vue&#39;
const helloWorldShow = ref(true)
</script>

<style>
#app {
  /* more css */
}
/* 进入之前和离开后的样式 */
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
/* 离开和进入过程中的样式 */
.v-enter-active,
.v-leave-active {
  /* 添加过渡动画 */
  transition: opacity 0.5s ease;
}
/* 进入之后和离开之前的样式 */
.v-enter-to,
.v-leave-from {
  opacity: 1;
}
</style>

Hasil larian kod adalah seperti yang ditunjukkan di bawah:

Beberapa class yang digunakan di atas, maksudnya adalah seperti berikut:

• v-enter-from: Tentukan keadaan permulaan untuk memasuki peralihan. Ia berkuat kuasa sebelum elemen dimasukkan dan dikeluarkan pada bingkai seterusnya selepas elemen dimasukkan.
• v-enter-active: Tentukan keadaan apabila peralihan berkuat kuasa. Digunakan sepanjang peralihan, berkuat kuasa sebelum elemen dimasukkan dan dialih keluar selepas peralihan/animasi selesai. Kelas ini boleh digunakan untuk menentukan masa proses, kelewatan dan fungsi lengkung untuk memasuki peralihan.
• v-enter-to: Tentukan keadaan akhir untuk memasuki peralihan. Berkuat kuasa bingkai seterusnya selepas elemen dimasukkan (pada masa yang sama v-enter-from dialih keluar), dan dialih keluar selepas peralihan/animasi selesai.
• v-leave-from: Mentakrifkan keadaan permulaan peralihan berlepas. Ia berkuat kuasa serta-merta apabila peralihan keluar dicetuskan dan dialih keluar bingkai seterusnya.
• v-leave-active: Mentakrifkan keadaan apabila peralihan keluar berkuat kuasa. Digunakan sepanjang peralihan keluar, berkuat kuasa serta-merta apabila peralihan keluar dicetuskan dan dialih keluar selepas peralihan/animasi selesai. Kelas ini boleh digunakan untuk menentukan masa proses, kelewatan dan fungsi lengkung untuk peralihan keluar.
• v-leave-to: Tinggalkan keadaan akhir peralihan. Berkuat kuasa bingkai seterusnya selepas peralihan keluar dicetuskan (pada masa yang sama v-leave-from dialih keluar), dan dialih keluar selepas peralihan/animasi selesai.

Gambar berikut ialah gambar daripada dokumentasi Vue, yang menerangkan dengan sempurna keseluruhan proses

peraturan penamaan kelas Nama

komponen

<transition>class tidak perlu diawali dengan v- Sebenarnya, kita boleh menyesuaikan awalan Kita hanya perlu menambah atribut name, seperti <transition name="ywz">, kemudian semua Awalan semuanya menjadi ywz-.

Gunakan animasi

Sebelum ini kami menggunakan atribut transition untuk mencapai kesan peralihan masuk dan keluar komponen Sekarang kita boleh menggunakan atribut animation untuk mencapainya, contoh kod Seperti berikut:

<transition>
  <hello-world v-if="helloWorldShow" msg="【一碗周】过渡动画演示demo" />
</transition>

css

/* 离开和进入过程中的样式 */
.v-enter-active,
.v-leave-active {
  /* 添加过渡动画 */
  transition: opacity 0.5s ease;
}

Hasil berjalan kod adalah seperti berikut:

Mod peralihan

Mari kita lihat masalah dahulu Apabila animasi bertukar antara dua elemen, masalah akan berlaku seperti berikut:

<template>
  <button class="btn btn-primary" @click="show = !show">显示与隐藏</button>
  <br />
  <transition>
    <hello-world v-if="show" msg="【一碗周】过渡动画演示demo" />
    <img v-else alt="Vue logo" src="./assets/logo.png" />
  </transition>
</template>

<script setup>
import { ref } from &#39;vue&#39;
import HelloWorld from &#39;./components/HelloWorld.vue&#39;
const show = ref(true)
</script>

<style>
/* 省略 */
</style>

Kesan larian adalah seperti berikut:

Kita boleh lihat dua komponen wujud serentak pada masa yang sama kesan, maka kita perlu menetapkan <transition> mod Peralihan komponen, iaitu atribut mode, yang mengandungi tiga nilai:

• default：新元素与当前元素同时进行。
• in-out：新元素先进行进入过渡，完成之后当前元素过渡离开。
• out-in：当前元素先进行离开过渡，完成之后新元素过渡进入。

了解这个属性之后，我们将代码修改一下，修改后如下：

<transition mode="out-in">
  <hello-world v-if="show" msg="【一碗周】过渡动画演示demo" />
  <img v-else alt="Vue logo" src="./assets/logo.png" />
</transition>

现在的运行结果如下：

appear属性

<transition>组件的appear属性用于开启手册渲染的动画，它接受一个布尔值，示例代码如下：

<transition mode="out-in" appear>
  <img v-if="show" alt="Vue logo" src="./assets/logo.png" />
</transition>

animate.css库的使用

如果我们在实际的开发中自己去一个一个的编写这些动画序列，那么效率是比较低下的，所以我们经常会用到一些动画库，最常见的就是animate.css。

现在我们就来看那一下如何在Vue中使用animate.css：

• 安装animate.css

npm i animate.css

• 引入animate.css

// main.jsimport 'animate.css'

使用动画序列

.v-enter-active {
  animation: fadeInDown 0.5s;
}
.v-leave-active {
  animation: fadeOutDown 0.5s;
}

使用自定义过渡class

<transition>组件还提供了属性来自定义过渡class，具体如下：

• enter-from-class
• enter-active-class
• enter-to-class
• leave-from-class
• leave-active-class
• leave-to-class

他们的优先级会高于普通的类名。

<transition
  mode="out-in"
  enter-active-class="animate__animated animate__fadeInDown"
  leave-active-class="animate__animated animate__fadeOutDown"
>
  <img v-if="show" alt="Vue logo" src="./assets/logo.png" />
</transition>

写在最后

本篇文章介绍了过渡的基本使用，掌握Vue提供的<transition></transition>组件配合animate.css可以轻松实现过渡动画。

除了单个组件的过渡外，Vue还提供了TransitionGroup组件，用于实现多个组件的过渡动画，我们以后介绍。

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan animasi peralihan dalam Vue3? Analisis kaedah perpustakaan komponen dan animasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!