滚动监视器阈值

确定基于目标元素在容器内的滚动位置触发操作的点。
阈值通过 onScroll() 参数 Object 的 enter 和 leave 属性来定义。

animate('.square', {
  x: 100,
  autoplay: onScroll({

    container: '.container',
    target: '.section',
    axis: 'y',
  ┌──────────────────────────┐
  │ enter: 'bottom top',     ├─ Thresholds
  │ leave: 'top bottom',     │
  └──────────────────────────┘
    sync: true,
    onEnter: () => {},
    onLeave: () => {},
    onUpdate: () => {},
  })
});

确定一个元素何时进入或离开视口的条件是通过比较两对值来指定的：目标和容器的start和end值。

┌────────────────────────────────┐- Container Start
│                                │
│   Container                    │
│                                │
│          ┌──────────┐----------│- Target Start
│          │          │          │
│          │  Target  │          │
└────────────────────────────────┘- Container End
           │          │
           └──────────┘------------ Target End

不同的语法

条件可以使用以下语法编写：

Object

onScroll({
  // Enters when the top of the target meets the bottom of the container
  enter: { target: 'top', container: 'bottom' },
  // Leaves when the bottom of the target meets the top of the container
  leave: { target: 'bottom', container: 'top' }
});

Container value String

容器值可以直接传递，目标值默认为进入时的 'start' 和离开时的 'end'。

onScroll({
  // Enters when the top of the target meets the bottom of the container
  enter: 'bottom',
  // Leaves when the bottom of the target meets the top of the container
  leave: 'top'
 });

Container and target value shorthand String

onScroll({
  // Enters when the bottom of the container meets the top of the target
  enter: 'bottom top',
  // Leaves when the top of the container meets the bottom of the target
  leave: 'top bottom',
});

默认输入

'结束 开始'

默认休假

'开始 结束'