direction

direction 参数被两个单独的参数替换：reversed 和 alternate。

`direction`	`反向`	`交替`	效果
`'forward'`	`false`	`false`	向前播放
`'reverse'`	`true`	`false`	向后播放
`'alternate'`	`false`	`true`	循环交替
`'alternate-reverse'`	`true`	`true`	反向开始并在循环中交替

语法比较

Anime.js

waapi.animate('.square', {
  x: 100,
  reversed: true,
  alternate: true,
  loop: 3
});

WAAPI 等效项

const targets = document.querySelectorAll('.square');

targets.forEach(($el, i) => {
  $el.animate({
    translate: '100px',
  }, {
    fill: 'forwards',
    duration: 1000,
    direction: 'alternate-reverse',
    iterations: 4
  })
});

接受

布尔值

direction 代码示例

import { waapi, stagger } from 'animejs';

waapi.animate('.square', {
  translate: '17rem',
  reversed: true,
  delay: stagger(100)
});

<div class="medium row">
  <div class="square"></div>
</div>
<div class="medium row">
  <div class="square"></div>
</div>
<div class="medium row">
  <div class="square"></div>
</div>

上一个 下一个