如何在anime.js中设置目标元素的初始位置？

Question

目标

点击“打开菜单”按钮：

淡淡的叠加层出现淡入动画

暗淡叠加动画完成后，从顶部开始，暗淡叠加动画从上到下出现：

解决方案尝试和问题

<template>
  <transition @enter="animateOpening" @leave="animateClosing">
    <div 
      class="SearchProductsPane-DimUnderlay"
      v-if="isOpen"
      :ref="elementsReferencesIDs.overlay"
     >
        <div 
          class="SearchProductsPane-Body" 
         :ref="elementsReferencesIDs.body"
       >
         <!-- ... -->
       </div>
    </div>
  </transition>
</template>

import { Vue, Component } from "vue-property-decorator";
import Animation from "animejs";

@Component
export default class SearchProductsPane extends Vue {

  private elementsReferencesIDs: Record<"overlay" | "body", string> = {
    overlay: "Overlay", body: "Body"
  };

  private animateOpening(_element: Element, done: () => {}): void {
    Animation
      .timeline({
        easing: "linear",
        duration: 500,
        complete: done
      })
      .add({
        targets: this.$refs[this.elementsReferencesIDs.overlay],
        opacity: [0, 1]
      })
      .add({
        targets: this.$refs[this.elementsReferencesIDs.body],
        translateY: "100%"
      })
  }

  private animateClosing(): void {

  }
}

使用当前的解决方案，.SearchProductsPane-Body 将从正常位置移动到屏幕的下方。而不是它，我需要它从屏幕外部向上移动到正常位置。

我尝试通过添加以下内容来达到它 class:

.SearchProductsPane-Body__InitialPosition {
  transform: translateY(-100%);
}

但是，animejs 动画从 0% 开始，而不是 -100%。怎么改？

Answer 1

您可以在 animeJs 中使用 From Value，它允许您定义您的动画来源：

anime.stagger(100, {from: 'center'})

您的选择是：

first：动画从第一个元素开始（默认从值开始）
last：动画从最后一个元素开始
center：动画从中心开始
index：你选择动画从哪个元素开始

这里是 docs.

或者您可以使用 From to 强制动画从指定值开始。

在你的代码中：

anime({
  targets: '.SearchProductsPane-DimUnderlay'
});

文档here

如何在anime.js中设置目标元素的初始位置？

How to setup initial position of target element in anime.js?

vue.js

anime.js

目标

解决方案尝试和问题