动画对象从屏幕一侧进入然后返回？

Question

我正在使用anime.js 将屏幕右侧的多个div 设置为由CSS 样式定义的位置。我也在创建一个函数来做相反的事情，但我遇到了几个问题。

1. 我了解如何通过更改 translateX 将对象从其位置动画化到目的地，但我不知道如何动画化移动到其原始位置，例如 GSAP.from()。我尝试这样做以在不可见的情况下将 div 设置为关闭屏幕，以便我可以将它们移回原始位置，但它似乎忽略了负值并继续朝一个方向移动。

  showAnswerButtons.set(answer_button_array, {translateX: offset_num})
  showAnswerButtons.add({
    targets: answer_button_array,
    translateX: negative_offset_num,
    translateY: negative_offset_num,
    duration: 5000,
    delay: anime.stagger(200)
  });

1. 作为最后一种方法的替代方法，我还尝试播放动画以将 div 移出屏幕，因此我可以反转动画以将它们带回来。我有 4 个 div 要制作动画，有时我需要将其中的一些从 DOM 中取出（或者至少让它们不可见）。所以我的计划是让它们离开屏幕，根据需要改变可见性，然后只带回我想要的那些。不幸的是，使用timeline.reverse() 并没有做任何事情，我读过几个有类似问题的人的故事。我也尝试过设置方向：'reverse'，然后是 timeline.play() 没有成功。

有人可以帮我处理这段代码吗？

<div id="container">
<button id="answer_button_1" class="button"></button>
<button id="answer_button_2" class="button"></button>
<button id="answer_button_3" class="button"></button>
<button id="answer_button_4" class="button"></button>
</div>

.button {
  display: flex;
  position: relative;
  top: 200px;
  left: 100px;
  height: 50px;
  width: 400px;
  background-color: black; /*Button Color*/
  color: #f5f5f5;
}

#container {
  position: absolute;
  right: 50%;
  left: 50%;
}

var hideAnswerButtons;
var showAnswerButtons;

let hidden = true;
document.addEventListener("click", () => {
  hidden = !hidden;
  if (hidden) {
    showAnswerButtons.play();
  } else {
    hideAnswerButtons.play();
  }
});

defineAnimations();
function defineAnimations() {
  let offset_num = 1000;
  let negative_offset_num = -100;
  let answer_button_array = [
    answer_button_4,
    answer_button_3,
    answer_button_2,
    answer_button_1
  ];
  hideAnswerButtons = anime.timeline({ autoplay: false });
  hideAnswerButtons.add({
    targets: answer_button_array,
    translateX: offset_num,
    translateY: offset_num,
    duration: 5000,
    delay: anime.stagger(200),
    easing: 'linear'
  });
  showAnswerButtons = anime.timeline({ autoplay: false });
  //showAnswerButtons.add({
    //targets: answer_button_array,
    //translateX: offset_num,
    //translateY: offset_num,
    //duration: 0,
    //easing: "linear"
  //});
  showAnswerButtons.set(answer_button_array, {translateX: offset_num})
  showAnswerButtons.add({
    targets: answer_button_array,
    translateX: negative_offset_num,
    translateY: negative_offset_num,
    duration: 5000,
    delay: anime.stagger(200),
    easing: 'linear'
  });
}

Answer 1

如果您想反转动画并将 div 带到其原始位置，您可以使用“direction: 'alternate'”。在anime.js 文档中有更多关于它的信息：

https://animejs.com/documentation/