saos

滾動上的纖細動畫

一個非常小的苗條組件，用於在滾動上為元素添加動畫效果

SAoS 允許您在滾動時對元素進行一次或多次動畫，您可以定義頂部和底部“觸發器”以及內部div 的css（不推薦，但在某些情況下可以提供幫助），請參閱下面的演示，如何安裝和一些例子？

在效能方面，這個函式庫對大多數瀏覽器使用 Intersection Observer（為你的 Internet Explorer 感到羞恥）

⚡ 演示

---

如何安裝

• 尼普

 npm i saos --save-dev

• 紗

 yarn add -D saos

注意： Sapper 僅支援 libs 作為 DEV 依賴項，如果您確實想將此庫用作 Sapper 的正常依賴項，請確保像這樣導入import Saos from 'saos/src/Saos.svelte';否則SSR就會出問題！

如何使用

基本用法：

• 首先在Svelte上導入包

 import Saos from "saos" ;

• 然後將您的 @keyframes 動畫定義為 -global- on 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 -> 當元素不再“可見”時播放動畫（使用頂部和底部來定義它），預設值：“none; opacity: 0”
• Once -> 動畫是否只播放一次或多次，預設： false
• top -> 觀察者的頂部，使用正值播放頂部可見後的動畫，預設：0
• Bottom -> 觀察者的底部，使用正值在底部可見後播放動畫，預設：0
• css_observer -> 作為觀察者的div的css，不建議使用，但是在這裡？ ，預設：“”
• css_animation -> div的css，即動畫，不建議使用，但在這裡？ ，預設：“”

我們也有反應性調度！

你可以這樣做：

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

它會起作用的！太神奇了不是嗎？看看我們示範中的最後一張卡

你可以在這裡看到一堆用法

如果你（像我一樣）懶於創造自己的動畫，請看看 animista