进入起始

定义应用于进入布局的元素的初始属性和过渡时间。
如果满足以下任一条件，则认为元素正在进入

元素从 display: none 变为可见
元素从 visibility: hidden 变为可见
元素刚刚被添加到布局中（例如 $root.appendChild($el)）

可接受的属性

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

状态动画目前不支持 CSS transform 简写。

enterFrom: { x: 100, y: 200 } // Invalid
enterFrom: { transform: 'translate(100px, 200px)' } // Valid

接受

一个带有以下属性的 Object 参数

CSS 属性名称：Number|String|Function
delay: Number|Function
duration: Number|Function
ease: String|Function

默认值

{ opacity: 0 }

enterFrom 代码示例

import { createLayout, utils } from 'animejs';

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

const layout = createLayout('.layout-container', {
  duration: 250,
  ease: 'outQuad',
  enterFrom: {
    transform: 'translateY(100px) scale(.25)',
    opacity: 0,
    duration: 350, // Applied to the elements entering the layout
    ease: 'out(3)' // Applied to the elements entering the layout
  }
});

let count = 0;

function addItem() {
  layout.update(({ root }) => {
    const $item = document.createElement('div');
    $item.classList.add('item', 'col');
    $item.innerHTML = ++count;
    if (count > 15) return $button.disabled = true;
    root.appendChild($item);
  });
}

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

<div class="large layout centered row">
  <div class="layout-container col grid-layout row">

  </div>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button class="button">Add item</button>
  </fieldset>
</div>