saos تحميل - saos تحميل كود المصدر

saos

شفرة المصدر الأخرى

v1.3.1

تنزيل

الرسوم المتحركة Svelte على التمرير

مكون صغير جدًا لتحريك العناصر الخاصة بك عند التمرير

يتيح لك SAoS تحريك عنصر مرة واحدة أو عدة مرات عند التمرير، ويمكنك تحديد "المشغلات" العلوية والسفلية وcss لعناصر div الداخلية (غير موصى به، ولكن يمكن أن يساعد في بعض الحالات)، انظر أدناه العرض التوضيحي، كيفية التثبيت وبعض الأمثلة؟

فيما يتعلق بالأداء، يستخدم هذا lib مراقب التقاطع لمعظم المتصفحات (عار عليك يا Internet Explorer)

⚡ تجريبي

كيفية التثبيت

Npm

 npm i saos --save-dev

غزل

 yarn add -D saos

ملاحظة: يدعم Sapper فقط libs باعتبارها تبعيات DEV ، إذا كنت تريد حقًا استخدام هذا lib باعتباره تبعية عادية على Sapper، فتأكد من الاستيراد مثل هذا import Saos from 'saos/src/Saos.svelte'; وإلا سيكون لديك مشاكل مع SSR!

كيفية الاستخدام

الاستخدام الأساسي:

قم أولاً باستيراد الحزمة على Svelte

 import Saos from "saos" ;

ثم قم بتعريف الرسوم المتحركة @keyframes الخاصة بك على أنها -global- على svelte

 @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 ;
  }
}

وأخيرًا أضف اسم الإطار الرئيسي بدون -global- ومعلمات الرسوم المتحركة الأخرى

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

خارج معلمة الرسوم المتحركة، يمكنك استخدام:

Animation_out -> لتشغيل رسم متحرك عندما لا يكون العنصر "مرئيًا" (استخدم الجزء العلوي والسفلي لتحديد ذلك)، الافتراضي: "لا شيء؛ العتامة: 0"
مرة واحدة -> إذا كان سيتم تشغيل الرسوم المتحركة مرة واحدة فقط أو عدة مرات، الافتراضي: خطأ
أعلى -> الجزء العلوي من المراقب، استخدم قيمة موجبة لتشغيل الرسوم المتحركة بعد أن يكون الجزء العلوي مرئيًا، الافتراضي: 0
أسفل -> أسفل المراقب، استخدم قيمة موجبة لتشغيل الرسوم المتحركة بعد أن يكون الجزء السفلي مرئيًا، الافتراضي: 0
css_observer -> CSS الخاص بـ div الذي يمثل المراقب، لا يُنصح باستخدامه، ولكنه موجود هنا؟، الافتراضي: ""
css_animation -> ملف CSS الخاص بـ div الذي يمثل الرسوم المتحركة، لا يوصى باستخدامه، ولكنه موجود هنا؟، الافتراضي: ""

ولدينا إرساليات تفاعلية أيضًا!

يمكنك القيام بشيء مثل:

 // 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 >