remove()

从时间轴中移除动画、计时器、时间线、目标或特定的补间属性。

如果删除所有目标、动画、计时器和时间轴,时间轴将会自动暂停。

从时间轴中删除项目不会影响其持续时间。如果你需要更改时间轴的形状和持续时间,你应创建一个新的时间轴。

移除动画、计时器或时间轴

timeline.remove([animation, timer, timeline]);
参数 接受
object Animation | Timer | Timeline
position (opt) Time position

移除目标

timeline.remove(targets);
参数 接受
targets Targets

移除目标属性

timeline.remove(targets, propertyName);
参数 接受
targets 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>