Animejs 绝对 div 过渡到另一个 div 的位置

Question

我想在三角形路径模式中制作三个 div 的动画，这样它们就可以在三角形中从一个角到另一个角循环。我似乎无法让它工作。仍然缺少一些东西。

顶角元素要移到左角，但没有将自己准确地放在左角的位置，而是缺少几个像素。

const el1 = document.querySelector('.el1').getBoundingClientRect()
const el2 = document.querySelector('.el2').getBoundingClientRect()
const el3 = document.querySelector('.el3').getBoundingClientRect()

anime({
          targets: '.el1',
      top: el2.top,
      left: el1.left - el2.left,
      delay: () => 1000,
      loop: false,
      easing: 'linear',
});

body {
  background: black;
  padding: 0;
  margin: 0;
}

.el1 {
  position: absolute;
  background: red;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.el2 {
  position: absolute;
  background: green;
  top: 70%;
  left: 15%;
  transform: translate(-50%, -50%);
}

.el3 {
  position: absolute;
  background: blue;
  top: 70%;
  left: 85%;
  transform: translate(-50%, -50%);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div class='el1'>ELEMENT 1</div>
<div class='el2'>ELEMENT 2</div>
<div class='el3'>ELEMENT 3</div>

Answer 1

问题是由应用于所有元素的 transform 样式引起的。

由于百分比值，转换基于每个元素的大小，并且 el1 和 el2 等不同。参见 docs:

Percentages: refer to the size of bounding box

我也修复了 JS 设置 left: el2.left，所以在动画之后 el1 将取代 el2。

const el1 = document.querySelector('.el1').getBoundingClientRect()
const el2 = document.querySelector('.el2').getBoundingClientRect()
const el3 = document.querySelector('.el3').getBoundingClientRect()

anime({
          targets: '.el1',
      top: el2.top,
      left: el2.left,
      delay: () => 1000,
      loop: false,
      easing: 'linear',
});

body {
  background: black;
  padding: 0;
  margin: 0;
}

.el1 {
  position: absolute;
  background: red;
  top: 30%;
  left: 50%;
}

.el2 {
  position: absolute;
  background: green;
  top: 70%;
  left: 15%;
}

.el3 {
  position: absolute;
  background: blue;
  top: 70%;
  left: 85%;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div class='el1'>ELEMENT 1</div>
<div class='el2'>ELEMENT 2</div>
<div class='el3'>ELEMENT 3</div>

Animejs 绝对 div 过渡到另一个 div 的位置

Animejs absolute div transition to position of another div

javascript

css

animation

anime.js