最小值 最大值
定义可滚动空间的最小或最大阈值。在某些情况下,这尤其有用,例如一些目标元素的初始位置过小或过大,无法触发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>