Tip
Jika Anda menyukai perpustakaan ini, pertimbangkan untuk mendukung penciptanya.
React Awesome mengungkapkan adalah perpustakaan untuk aplikasi React yang ditulis dalam naskah yang menambahkan animasi mengungkapkan menggunakan API pengamat persimpangan untuk mendeteksi ketika elemen muncul di viewport. Animasi disediakan secara internal oleh emosi dan diimplementasikan sebagai animasi CSS untuk mendapatkan manfaat dari akselerasi perangkat keras.
Untuk menambahkan paket ini sebagai ketergantungan ke aplikasi Anda, cukup jalankan
npm install react-awesome-reveal @emotion/react --saveAtau, jika Anda menggunakan benang:
yarn add react-awesome-reveal @emotion/reactAtau, jika Anda menggunakan PNPM (seperti yang saya sarankan):
pnpm add react-awesome-reveal @emotion/react Efek Impor dari React Awesome mengungkapkan ke komponen React Anda, misalnya efek Fade :
import { Fade } from "react-awesome-reveal" ;Maka cukup bungkus komponen yang ingin Anda animasi:
< Fade >
< p > I will gently appear as I enter the viewport </ p >
</ Fade > Efek yang saat ini didukung adalah Bounce , Fade , Flip , Hinge , JackInTheBox , Roll , Rotate , Slide dan Zoom . Lihat dokumentasi Animate.CSS untuk detailnya.
Sejak versi 3, animasi pencari perhatian dibungkus oleh komponen AttentionSeeker , yang menerima prop yang disebut effect yang menentukan animasi untuk membuat (default untuk "bounce” ). Efek yang didukung adalah: ”bounce" , "flash" , "headShake” , " "heartBeat" "jello” ", "pulse" , "rubberBand" , “shake” , “shakeX" , "shakeY” , "swing” , "tada" dan “wobble” .
Sekali lagi, lihat dokumentasi Animate.CSS untuk detailnya.
Anda dapat meneruskan alat peraga berikut ke komponen animasi untuk menyesuaikan perilaku:
| Menopang | Keterangan | Nilai | Bawaan |
|---|---|---|---|
cascade | Jika diatur, setiap anak dari animasi mengungkapkan secara otomatis mendapatkan penundaan yang memperhitungkan pendahulunya (anak i memasuki viewport setelah i * delay * damping milidetik) - berguna untuk menjiwai item daftar. | true atau false | false |
damping | Faktor yang mempengaruhi keterlambatan bahwa setiap komponen animasi dalam animasi kaskade akan ditugaskan. Jika damping = 1 maka penundaan akan sama dengan durasi animasi; Jika damping < 1 maka penundaan akan lebih rendah dari durasi animasi; Jika damping > 1 maka penundaan akan lebih besar dari durasi animasi. | number | 0.5 (artinya penundaan akan menjadi setengah dari durasi animasi) |
direction | Asal animasi (jika berlaku). | Biasanya "down" , "left" , "right" atau "up" , dengan beberapa pengecualian didokumentasikan dalam kode | undefined |
delay | Saatnya menunggu sebelum animasi dimulai (dalam milidetik). | number | 0 |
duration | Durasi animasi (milidetik). | number | 1000 |
fraction | Berapa banyak elemen yang seharusnya dalam viewport sebelum animasi dipicu. | number antara 0 dan 1 | 0 |
triggerOnce | Menentukan apakah animasi harus berjalan hanya sekali atau setiap kali elemen masuk/keluar/masuk kembali ke viewport. | true atau false | false |
className | Nama kelas untuk ditambahkan ke elemen wadah. | string | undefined |
style | Gaya inline untuk ditambahkan ke elemen wadah. | React.CSSProperties | undefined |
childClassName | Nama kelas untuk ditambahkan ke elemen anak. | string | undefined |
childStyle | Gaya inline untuk ditambahkan ke elemen anak. | React.CSSProperties | undefined |
onVisibilityChange | Callback dieksekusi saat elemen masuk atau meninggalkan viewport. Jika lebih dari satu elemen sedang dianimasikan, fungsi ini dipanggil pada setiap elemen. | (inView: boolean, entry: IntersectionObserverEntry) => void | undefined |
Untuk memicu animasi hanya untuk pertama kalinya elemen memasuki viewport:
< Slide triggerOnce >
< p > I will animate only the first time you see me </ p >
</ Slide > Untuk menggabungkan beberapa animasi, atur prop cascade ke true :
< Fade cascade >
< p > I enter first... </ p >
< p > ...then comes my turn... </ p >
< p > ...and finally you see me! </ p >
</ Fade > Bermain dengan prop damping untuk mengubah keterlambatan yang dengannya setiap anak akan muncul secara progresif:
< Fade cascade damping = { 0.1 } >
< p > I enter first... </ p >
< p > ...then comes my turn... </ p >
< p > ...and finally you see me! </ p >
</ Fade > Mulai dari versi 3.2.0, Anda dapat mendefinisikan animasi khusus! Cukup impor komponen Reveal (yang merupakan ekspor default perpustakaan - berikan nama yang Anda inginkan) dan berikan prop keyframes :
import React from "react" ;
import Reveal from "react-awesome-reveal" ;
import { keyframes } from "@emotion/react" ;
const customAnimation = keyframes `
from {
opacity: 0;
transform: translate3d(-200px, -100px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
` ;
function CustomAnimation ( { children } ) {
return < Reveal keyframes = { customAnimation } > { children } </ Reveal > ;
} Jika tidak ada prop keyframes yang dilewati, animasi yang diberikan default adalah pintu masuk yang memudar dari kiri (setara dengan <Fade direction="left">...</Fade> ).
Anda juga dapat melewati alat peraga ini untuk Reveal :
cascadedampingdelaydurationfractiontriggerOnceclassName dan childClassNamestyle dan childStyleonVisibilityChangePengamat persimpangan adalah API yang digunakan untuk menentukan apakah suatu elemen berada di dalam viewport atau tidak. Dukungan browser sangat bagus - dengan safari menambahkan dukungan di 12.1, semua browser utama sekarang mendukung pengamat persimpangan secara asli.
Jika Anda perlu mendukung browser lama, tambahkan polyfill untuk API pengamat persimpangan.
Anda dapat menambahkan polyfill secara langsung atau menggunakan layanan seperti polyfill.io untuk menambahkannya saat dibutuhkan.
yarn add intersection-observerKemudian impor di aplikasi Anda:
import "intersection-observer" ;Jika Anda menggunakan webpack (atau serupa), Anda dapat menggunakan impor dinamis untuk memuat polyfill hanya jika diperlukan. Implementasi dasar bisa terlihat seperti ini:
/**
* Do feature detection, to figure out which polyfills needs to be imported.
**/
async function loadPolyfills ( ) {
if ( typeof window . IntersectionObserver === "undefined" ) {
await import ( "intersection-observer" ) ;
}
} Untuk melihat dokumentasi untuk versi sebelumnya, navigasikan melalui tag masa lalu di repositori proyek GitHub dan baca readme untuk versi spesifik itu.
Kode sumber proyek dilisensikan di bawah lisensi MIT. Anda bebas untuk membayar repositori ini, mengedit kode, berbagi dan menggunakannya untuk tujuan non-komersial dan komersial.
