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