交错起始

定义交错效果的起始位置。

接受

值	描述
`数字`	效果的起始索引
`'first'`	等同于索引 `0`
`'center'`	从中心开始效果
`'last'`	从最后一个元素开始效果

默认

0

交错起始代码示例

import { createtimeline, stagger } from 'animejs';

const tl = createTimeline({
  loop: true,
  alternate: true,
})
.add('.row:nth-child(1) .square', {
  scale: 0,
  delay: stagger(50, { from: 8 }),
})
.add('.row:nth-child(2) .square', {
  scale: 0,
  delay: stagger(50, { from: 'first' }),
})
.add('.row:nth-child(3) .square', {
  scale: 0,
  delay: stagger(50, { from: 'center' }),
})
.add('.row:nth-child(4) .square', {
  scale: 0,
  delay: stagger(50, { from: 'last' }),
});

<div class="small justified row">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
<div class="small justified row">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
<div class="small justified row">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
<div class="small justified row">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

上一个 下一个