最小值最大值
定义可滚动空间中最小或最大的阈值。这在某些目标元素的初始位置过小或过大,导致无法触发 enter(进入)和 leave(离开)条件时特别有用。
接受
| 值 | 描述 |
|---|---|
'min' |
满足进入或离开条件的最小值 |
'max' |
满足进入或离开条件的最大值 |
最小最大值代码示例
import { animate, onScroll, utils } from 'animejs';
utils.$('.square').forEach($square => {
animate($square, {
x: '15rem',
rotate: '1turn',
duration: 2000,
alternate: true,
ease: 'inOutQuad',
autoplay: onScroll({
container: '.scroll-container',
sync: 1,
enter: 'max bottom',
leave: 'min top',
debug: true
})
});
});
<div class="scroll-container scroll-y">
<div class="scroll-content grid square-grid">
<div class="scroll-section padded">
<div class="large row">
<div class="square"></div>
</div>
</div>
<div class="scroll-section padded">
<div class="large row">
<div class="square"></div>
</div>
</div>
<div class="scroll-section padded">
<div class="large row">
<div class="square"></div>
</div>
</div>
</div>
</div>