Ajar anda cara menggunakan Vue untuk mencapai kesan animasi (dengan kod)

Dalam artikel sebelum ini "Ajar anda langkah demi langkah cara menggunakan CSS3 untuk mencipta susun atur halaman yang ringkas (penjelasan kod terperinci) ", saya memperkenalkan anda cara menggunakan CSS3 untuk mencipta yang ringkas susun atur halaman. Artikel berikut akan memperkenalkan kepada anda cara menggunakan Vue untuk mencapai kesan animasi Rakan-rakan yang memerlukan boleh merujuknya. Saya harap ia akan membantu anda.

Alamat API rasmi: https://cn.vuejs.org/v2/guide/transitions.html

Rasmi demoKlik untuk menunjukkan dan hilang

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
<script>
  new Vue({
    el: "#demo",
    data: {
      show: true,
    },
  });
</script>
<style>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }
</style>

transition Gunakan

<transition name="fade">
  (元素，属性、路由....)
</transition>

<strong>class</strong> takrifan

.fade-enter{ }Masukkan keadaan permulaan peralihan, yang berkuat kuasa apabila elemen dimasukkan, dan dipadamkan serta-merta selepas menggunakan hanya satu bingkai; (keadaan gerakan awal)

.fade-enter-active{ }Masukkan keadaan akhir peralihan; , yang berkuat kuasa apabila elemen dimasukkan transition/animationAlih keluar apabila selesai. Kelas ini boleh digunakan untuk menentukan masa proses peralihan, kelewatan dan fungsi lengkung.

.fade-leave{ }Meninggalkan keadaan mula peralihan, mencetuskan apabila elemen dipadamkan dan dipadamkan serta-merta selepas menggunakan satu bingkai sahaja; , berkuat kuasa apabila elemen dipadamkan, Alih keluar selepas

selesai. Kelas ini boleh digunakan untuk menentukan masa proses peralihan, kelewatan dan fungsi lengkung.

.fade-leave-active{ }Nama kelas berlebihan tersuaitransition/animation

Lalai

menjadi

• .fade-enter.fade-in-enter

  Lalai
Menjadi

• .fade-enter-active .fade-in-active

  Lalai
menjadi

• .fade-leave .fade-out-enter

  Lalai
menjadi

• .fade-leave-active .fade-out-active

<transition
  name="fade"
  enter-class="fade-in-enter"
  enter-active-class="fade-in-active"
  leave-class="fade-out-enter"
  leave-active-class="fade-out-active"
>
  <p v-show="show">hello</p>
</transition>

Fungsi berkaitan

.fade-in-active,
.fade-out-active {
  transition: all 0.5s ease;
}
.fade-in-enter,
.fade-out-active {
  opacity: 0;
}

transition

Digabungkan dengan

<transition
  name="fade"
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
>
  <div v-show="show"></div>
</transition>
<script>
  export default {
    methods: {
      beforeEnter(el) {
        console.log("动画enter之前");
      },
      enter(el) {
        console.log("动画enter进入");
      },
      afterEnter(el) {
        console.log("动画进入之后");
        el.style.background = "blue";
      },
      beforeLeave(el) {
        console.log("动画leave之前");
      },
      leave(el) {
        console.log("动画leave");
      },
      afterLeave(el) {
        console.log("动画leave之后");
        el.style.background = "red";
      },
    },
  };
</script>

gunakan kod berikut

transitionanimate.css Elemen demonstrasi mengambil paksi-X sebagai garis dasar dan membalikkan animasi masuk dan keluar

Perpustakaan klik di sini: https://animate.style/

Animate.css

Peralihan senarai

<!-- 翻转进场出场-->
<transition enter-active-class="flipInX" leave-active-class="flipOutX">
  <div v-show="show" class="animated"></div>
</transition>
<!-- 或者 -->
<transition
  enter-active-class="animated flipInX"
  leave-active-class="animated flipOutX"
>
  <div v-show="show"></div>
</transition>

Perlu diambil perhatian bahawa apabila mengumpulkan, nilai kunci secara langsung mempengaruhi peralihan animasi untuk butiran, sila rujuk

<transition-group enter-active-class="flipInX" leave-active-class="flipOutX">
  <div v-show="show" :key="x" v-for="x in 5"></div>
</transition-group>

Nilai kekunci animasi vue mempengaruhi prestasi peralihan animasi

Pembelajaran yang disyorkan:

Tutorial video JavaScript

Atas ialah kandungan terperinci Ajar anda cara menggunakan Vue untuk mencapai kesan animasi (dengan kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!