swapAt

定义应用于动画元素的非动画子元素的中间过渡属性。
动画在进度的50%处插值到这些值，然后再返回到元素的计算状态。

接受的属性

可以设置任何有效的 CSS 属性。

状态动画尚不支持 CSS 变换简写。

swapAt: { scale: 1.2 } // Invalid
swapAt: { transform: 'scale(1.2)' } // Valid

接受

一个具有以下属性的Object参数：

CSS property names: Number|String|Function
delay: Number|Function
duration: Number|Function
ease: String|Function

默认

{ 不透明度: 0, 缓动: 'inOut(1.75)' }

swapAt 代码示例

import { createLayout, utils } from 'animejs';

const [ $buttonA, $buttonB ] = utils.$('.controls button');

const layout = createLayout('.layout-container', {
  children: '.item',
  duration: 1000,
});

function animateLayout(swapAt) {
  layout.update(({ root }) => root.classList.toggle('row'), { swapAt });
}

const animateWithFade = () => animateLayout({ opacity: 0, filter: 'blur(3px)' });
const animateWithoutFade = () => animateLayout({ opacity: 1 });

$buttonA.addEventListener('click', animateWithFade);
$buttonB.addEventListener('click', animateWithoutFade);

<div class="large layout centered row">
  <div class="layout-container col grid-layout row">
    <div class="item col"><p>These p tags are not animated</p></div>
    <div class="item col"><p>They only swap at 50% progress</p></div>
  </div>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button class="button">Animate with fade</button>
    <button class="button">Animate without fade</button>
  </fieldset>
</div>