Bagaimana untuk melaksanakan animasi peralihan yang ketat dalam React menggunakan kumpulan peralihan React?

Gunakan react-transition-group dalam React untuk mencapai animasi bertukar lancar

Dalam perkembangan React, react-transition-group adalah perpustakaan biasa untuk melaksanakan penukaran animasi antara komponen. Walau bagaimanapun, dalam aplikasi praktikal, pemaju sering menghadapi situasi di mana kesan animasi tidak sesuai, seperti kawasan kosong yang muncul apabila komponen beralih, mengakibatkan animasi tidak cukup lancar. Artikel ini menganalisis masalah ini dan menyediakan penyelesaian.

Penerangan Masalah: Matlamatnya adalah untuk merealisasikan animasi penukaran komponen yang meluncur dari kanan ke kiri, yang memerlukan kedua -dua komponen itu berkait rapat semasa proses animasi tanpa sebarang jurang. Tetapi kesan sebenar ialah terdapat ruang kosong antara komponen.

Contoh kod soalan:

<switchtransition>
  <csstransition classnames="checkout" key="{this.state.isPhone}" timeout="{500}">
    {this.state.isphone? (
      <phone handleback="{()"> this.setPhonestate (false)} handlephoneclick = {this.handlephoneclick} />
    ): (
      <main handlephoneclick="{this.handlePhoneClick}"></main>
    )}
  </phone></csstransition>
</switchtransition>

Gaya CSS yang sepadan:

 .CHECKOUT-ENSTER {
  Transform: TranslateX (100%);
}
.CHECKOUT-ENTER-ACTIVE {
  Transform: TranslateX (0);
  Peralihan: Semua 500ms;
}

.checkout-exit {
  Transform: TranslateX (0);
}
.CHECKOUT-EXIT-ACTIVE {
  Transform: TranslateX (-100%);
  Peralihan: Semua 500ms;
}

Analisis Masalah: Kod CSS di atas mentakrifkan kesan dalam dan keluar dari animasi, tetapi tidak menganggap hubungan posisi komponen semasa proses animasi, mengakibatkan jurang antara komponen.

Penyelesaian: Kuncinya adalah menggunakan position: absolute dan tepat mengawal kedudukan komponen semasa proses animasi.

Gaya CSS yang diperbetulkan:

 .CHECKOUT-ENSTER {
  Kedudukan: Mutlak;
  Kanan: 0;
  Transform: TranslateX (100%);
}
.CHECKOUT-ENTER-ACTIVE {
  Transform: TranslateX (0);
  Peralihan: Semua 500ms;
}

.checkout-exit {
  Kedudukan: Mutlak;
  Kiri: 0;
  Transform: TranslateX (0);
}
.CHECKOUT-EXIT-ACTIVE {
  Transform: TranslateX (-100%);
  Peralihan: Semua 500ms;
}

Dengan menetapkan position: absolute , dan meletakkan komponen masuk dan keluar ke kanan dan kiri bekas masing -masing, memastikan bahawa komponen sentiasa bersambung rapat semasa proses animasi, dengan itu menghapuskan kawasan kosong dan lancar beralih kesan animasi. Ini menjadikan animasi lebih lancar dan pengalaman pengguna lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan animasi peralihan yang ketat dalam React menggunakan kumpulan peralihan React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!