saos

Animasi Langsing di Gulir

Komponen ramping yang sangat kecil untuk menganimasikan elemen Anda saat digulir

SAoS memungkinkan Anda untuk menganimasikan satu atau beberapa kali elemen pada gulir, Anda dapat menentukan "pemicu" atas dan bawah serta css dari div internal (tidak disarankan, tetapi dapat membantu dalam beberapa kasus), lihat demo di bawah, cara menginstal dan beberapa contoh?

Dalam hal kinerja, lib ini menggunakan Intersection Observer untuk sebagian besar browser (memalukan bagi Anda Internet Explorer)

⚡ Demo

---

Bagaimana cara menginstal

• Npm

 npm i saos --save-dev

• Benang

 yarn add -D saos

Catatan: Sapper hanya mendukung lib sebagai dependensi DEV , jika Anda benar-benar ingin menggunakan lib ini sebagai ketergantungan normal pada Sapper, pastikan untuk mengimpor seperti ini import Saos from 'saos/src/Saos.svelte'; atau jika tidak, Anda akan mendapat masalah dengan SSR!

Cara menggunakan

Penggunaan dasar:

• Pertama impor paket di Svelte

 import Saos from "saos" ;

• Kemudian tentukan animasi @keyframes Anda sebagai -global- yang ramping

 @keyframes -global-from-left {
  0 % {
    transform : rotateX ( 50 deg ) translateX ( -200 vw ) skewX ( -50 deg );
    opacity : 1 ;
  }
  100 % {
    transform : rotateX ( 0 deg ) translateX ( 0 ) skewX ( 0 deg );
    opacity : 1 ;
  }
}

• Terakhir tambahkan nama keyframe tanpa parameter animasi -global- dan lainnya

 < Saos animation = { "from-left 4s cubic-bezier(0.35, 0.5, 0.65, 0.95) both"} >
  < div > < p > animation: from-left  p >  div >
 Saos >

Di luar parameter animasi, Anda dapat menggunakan:

• animation_out -> untuk memutar animasi ketika elemen tidak lagi "terlihat" (gunakan bagian atas dan bawah untuk mendefinisikannya), default: "none; opacity: 0"
• sekali -> jika animasi hanya akan diputar satu kali atau beberapa kali, default: false
• top -> bagian atas pengamat, gunakan nilai positif untuk memutar animasi setelah bagian atas terlihat, default: 0
• bawah -> bagian bawah pengamat, gunakan nilai positif untuk memutar animasi setelah bagian bawah terlihat, default: 0
• css_observer -> css dari div yang menjadi pengamat, tidak disarankan untuk digunakan, tetapi ada di sini?, default: ""
• css_animation -> css dari div yang merupakan animasi, tidak disarankan untuk digunakan, tetapi ada di sini?, default: ""

Dan kami juga memiliki pengiriman reaktif!

Anda dapat melakukan sesuatu seperti:

 // Create a handler on your script

function handleObserver ( x ) {
  console . info ( x . detail . observing ) ;
}

// Use the `update` event on your html that will be dispatched every time that the `observing` update!

< Saos on : update = { handleObserver } > ... < / Saos >

Dan itu akan berhasil! Luar biasa bukan? lihat kartu terakhir di demo kami

Dan Anda dapat melihat banyak kegunaan di sini

Jika Anda malas (seperti saya) membuat animasi sendiri, lihatlah animista