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

【问题标题】：How to setup initial position of target element in anime.js?如何在anime.js中设置目标元素的初始位置？
【发布时间】：2020-09-25 07:50:51
【问题描述】：

目标

点击“打开菜单”按钮：

随着淡入动画出现的暗覆盖

完成昏暗叠加动画后，从顶部开始，昏暗叠加会出现，并带有从上到下的滑动动画：

解决方案尝试和问题

<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 将从正常位置移动到屏幕下方的下方。而不是它，我需要它从屏幕外部向上移动到正常位置。

我尝试通过添加以下类来达到它：

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

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

【问题讨论】：

animejs 可以设置开始和结束值。见animejs.com/documentation/#fromToValues
@User28，感谢您的评论回答。请添加常规（非评论）答案，我会尽快给你声誉奖。
谢谢，但我想我无法写出完整的答案。由于我仍然不能 100% 理解这个问题，所以您可以为可能有同样问题的其他人写一个答案。
@User28，从文档中复制粘贴您的第一条评论和代码就足够了，因为我解决了我的问题。

标签： vue.js anime.js

【解决方案1】：

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

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

你的选择是：

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

这里是docs。

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

在你的代码中：

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

文档here

【讨论】：