Anime.js中的反向动画无法正常运行

问题描述

我有一个表格，允许用户注册或登录他们的帐户。我正在尝试使用anime.js从注册表单转换为登录表单（反之亦然）。

最初，我希望translateX属性为0，这是注册状态，如果用户拥有一个帐户并要登录，则动画应在translateX上转换为420。

我遇到的问题是translateX的初始位置是420。我试图通过在页面加载时调用reverseAnime.play（）来解决此问题。但是，我宁愿将平移位置设为0初始位置并过渡到位置420。

我包括了一个沙盒，用于更清晰的理解。

code sandbox example

解决方法

经过进一步研究（谷歌搜索），我找到了使用anime.js（2.0.2）较旧版本的解决方案。我将其应用于我的项目，并且成功了！好极了！我不确定最新版本是否有错误，但是使用反向（查看上面的沙盒示例）对我不起作用。

如果任何人有更多信息，并且可以告诉我我做错了什么，或者确认截至今天（10/28/20）的最新版本（3.2.1）是否存在也没有帮助的错误，

// const staticPanel = document.querySelector(".panel--static");
const slidingPanel = document.querySelector(".panel--sliding");

const signupBtn = document.querySelector(".signup");
// console.log(signupBtn);
const loginBtn = document.querySelector(".login");
// console.log(loginBtn);

const signupContent = document.querySelector(".panel__content.signup");
const loginContent = document.querySelector(".panel__content.login");

let animation = anime({
  targets: slidingPanel,translateX: "92%",elasticity: 100,autoplay: false,});

let animationReverse = anime({
  targets: slidingPanel,direction: "reverse",});


loginBtn.onclick = () => {
  animation.restart();
  loginContent.classList.replace("hide","show");
  signupContent.classList.add("hide");
};

signupBtn.onclick = () => {
  animationReverse.restart();
  signupContent.classList.replace("hide","show");
  loginContent.classList.add("hide");
};

anime.js forms javascript