leaveTo

定义应用于离开布局的元素的最终属性和过渡时间。
如果满足以下条件之一，则元素被视为正在离开：

The element becomes hidden with display: none
The element becomes hidden with visibility: hidden

接受的属性

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

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

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

接受

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

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

默认

{ 不透明度: 0 }

离开到代码示例

import { createLayout, utils } from 'animejs';

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

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

function removeItem() {
  layout.update(({ root }) => {
    const items = root.querySelectorAll('.item:not(.is-hidden)');
    if (!items.length) return $button.disabled = true;
    items[0].classList.add('is-hidden'); // temporarily hide the element using `display: none`
  }).then(() => {
    // Remove the elements from the DOM when the animation finishes
    layout.leaving.forEach($el => $el.remove());
  });
}

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

<div class="large layout centered row">
  <div class="layout-container col grid-layout row">
    <div class="item col">1</div>
    <div class="item col">2</div>
    <div class="item col">3</div>
    <div class="item col">4</div>
    <div class="item col">5</div>
    <div class="item col">6</div>
    <div class="item col">7</div>
    <div class="item col">8</div>
    <div class="item col">9</div>
    <div class="item col">10</div>
  </div>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button class="button">Remove item</button>
  </fieldset>
</div>

#layout-states-parameters-leaveTo .is-hidden {
  display: none;
}