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

问题描述

目标

点击“打开菜单”按钮：

带有淡入动画的昏暗叠加层

完成昏暗的叠加动画之后，从顶部开始，昏暗的叠加与从顶部到底部的滑动动画一起出现：

解决方案尝试和问题

<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中使用From Value，从而可以定义动画原点：

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

您的选择是：

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

这是docs。

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

在您的代码中：

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

docs here

anime.js vue.js