remove()
从时间轴中移除动画、定时器、其他时间轴、目标或特定的补间属性。
如果所有目标、动画、定时器和时间轴都被移除，时间轴将自动暂停。
从时间轴中移除项目不会影响其持续时间。如果您需要改变时间轴的形态和持续时间，建议创建一个新的时间轴。
移除动画、定时器或时间轴
timeline.remove([animation, timer, timeline]);| 参数 | 接受 |
|---|---|
| object (对象) | 动画 | 计时器 | 时间轴 |
| 位置 (可选) | 时间位置 |
移除目标
timeline.remove(targets);| 参数 | 接受 |
|---|---|
| targets | 目标 |
移除目标属性
timeline.remove(targets, propertyName);| 参数 | 接受 |
|---|---|
| targets | 目标 |
| propertyName (属性名称) | 有效的可动画属性 字符串 |
返回
时间轴本身
可以与其他时间轴方法链式调用。
remove() 代码示例
import { animate, createTimeline, utils } from 'animejs';
const [ $removeA, $removeB, $removeC ] = utils.$('.button');
const animation = animate('.circle', { x: '15rem', scale: [1, .5, 1] });
const tl = createTimeline({ loop: true, alternate: true })
.sync(animation)
.add('.triangle', { x: '15rem', rotate: 360 }, 100)
.add('.square', { x: '15rem' }, 200);
const removeAnimation = () => tl.remove(animation);
const removeTarget = () => tl.remove('.square');
const removeRotate = () => tl.remove('.triangle', 'rotate');
$removeA.addEventListener('click', removeAnimation);
$removeB.addEventListener('click', removeTarget);
$removeC.addEventListener('click', removeRotate);<div class="large row">
<div class="medium pyramid">
<div class="triangle"></div>
<div class="square"></div>
<div class="circle"></div>
</div>
</div>
<div class="medium row">
<fieldset class="controls">
<button class="button">Remove anim</button>
<button class="button">Remove target</button>
<button class="button">remove tween</button>
</fieldset>
</div>