属性

在布局过渡期间，自动扩展列表，用于测量和动画化的 CSS 属性。
位置和尺寸始终由内部处理。使用此功能添加自定义属性，例如 CSS 变量或未包含在默认设置中的属性。

接受

CSS 属性名称 String 的 Array（包括 CSS 自定义属性，例如 '--my-var'）

默认值

[
  'opacity',
  'fontSize',
  'color',
  'backgroundColor',
  'borderRadius',
  'border',
  'filter',
  'clipPath'
]

属性代码示例

import { createLayout, utils } from 'animejs';

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

const layout = createLayout('.layout-container', {
  duration: 800,
  properties: ['boxShadow']
});

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

$button.addEventListener('click', animateLayout);

<div class="large layout centered row">
  <div class="layout-container grid-layout row">
    <div class="item col">animate</div>
    <div class="item col">box-shadow</div>
  </div>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button class="button">Animate</button>
  </fieldset>
</div>

#layout-layout-settings-properties .grid-layout .item {
  color: var(--hex-current-1);
  background-color: var(--hex-current-4);
  box-shadow: inset 0px 0px 6px var(--hex-current-1);
}

#layout-layout-settings-properties .grid-layout.row .item {
  box-shadow: inset 0px 0px 20px var(--hex-current-1);
}