animateInView()
如果拖动元素位于容器外部，则将其在视口内进行动画处理。
参数
| 名称 | 类型 | 描述 |
|---|---|---|
| 持续时间(可选) | 数字 |
动画持续时间 (默认值 350) |
| 间隙(可选) | 布尔值 |
拖动元素应被动画到距离容器边缘的额外距离 |
| 缓动(可选) | 缓动 |
应用于动画的缓动函数 (默认值 InOutQuad |
返回
可拖动元素本身
animateInView() 代码示例
import { createDraggable } from 'animejs';
const [ $animateInView ] = utils.$('.animate-button');
const draggable = createDraggable('.square', {
container: '.grid',
});
const animateInView = () => {
draggable.animateInView(400, 16);
}
// Set the draggable position outside the container
draggable.x = -24;
draggable.y = 72;
$animateInView.addEventListener('click', animateInView);<div class="medium padded show-bounds grid square-grid animate-in-view">
<div class="square draggable"></div>
</div>
<div class="large row">
<fieldset class="controls">
<button class="button animate-button">Animate in view</button>
</fieldset>
</div>.show-bounds.grid.square-grid.animate-in-view::before {
opacity: 1;
top: calc(1rem);
right: calc(1rem - 1px);
bottom: calc(1rem - 1px);
left: calc(1rem);
border: 1px dashed currentColor;
box-shadow: none;
}