如何使用转换动画更改元素的父级？

Question

我想将一个元素从一个父元素移动到另一个父元素。在这里我想应用 CSS 变换动画。

function abc() {
let child = document.querySelector("#child");
let parent = document.querySelector("#div_b");

parent.appendChild(child);
}

<div id="div_a" style="height:30px; width:30px; background-color:yellow;">
    <div id="child" class="new-box">
        <div style="width: 20px; height: 20px; background-color: green;"></div>
    </div>
  </div>

  <div id="div_b" style="height:30px; width:30px; background-color:red;">
  </div>
  
<button onclick="abc()">move</button>

Answer 1

您可以找出该元素当前所在的位置，将其移动到其新父级并找出它现在所在的位置，将其放回其原始父级并为其设置动画以转换到其新位置。

动画完成后，您将元素放入其新位置（即放入其新父级）。

function abc() {
  const child = document.querySelector("#child");
  const parent = document.querySelector("#div_b");
  const parentOriginal = document.querySelector("#div_a");
  parentOriginal.appendChild(child); //put back to where it was
  const x0 = child.getBoundingClientRect().left;
  const y0 = child.getBoundingClientRect().top;

  parent.appendChild(child);
  const x1 = child.getBoundingClientRect().left;
  const y1 = child.getBoundingClientRect().top;
  parentOriginal.appendChild(child);
  child.style.setProperty('--dx', (x1 - x0) + 'px');
  child.style.setProperty('--dy', (y1 - y0) + 'px');
  child.addEventListener('animationend', function() {
    parent.appendChild(child);
    child.classList.remove('move');
  });
  child.classList.add('move');
}

.move {
  animation: move 2s linear 1;
}

@keyframes move {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(var(--dx)) translateY(var(--dy));
  }
}

<div id="div_a" style="height:30px; width:30px; background-color:yellow;">
  <div id="child" class="new-box">
    <div style="width: 20px; height: 20px; background-color: green;"></div>
  </div>
</div>

<div id="div_b" style="height:30px; width:30px; background-color:red;">
</div>

<button onclick="abc()">move</button>

Answer 2

我认为这会解决你的问题。

const firstContainer =  document.querySelector('.first-container');

const secondContainer = document.querySelector('.second-container');


const box = document.querySelector('.box');

box.addEventListener('click', () => {
    box.classList.add('move');
    setTimeout(() => {
        firstContainer.removeChild(box);
        box.classList.remove('move');
        secondContainer.appendChild(box);
    },1000);
},{once:true})

*,
*::before,
*::after {
  box-sizing: border-box;
}


body{
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-content: center;
  margin:0;
  background-color: bisque;
}

.container{
  background-color: aquamarine;
  display: flex;
  flex-direction: row;
}

.first-container,
.second-container{
  width: 20rem;
  height: 20rem;
  background-color: aquamarine;
  border: 1px solid black;
  display: grid;
  place-content: center;
}

.box{
  width: 10rem;
  height: 10rem;
  background-color: brown;
  border-radius: 100%;
  display: grid;
  place-content: center;
}

.box p{
  color:white;
  font-size: 2rem;
  font-weight: 500;
  width: 100%;
}


.move {
  animation: movement 1s forwards;
}

@keyframes movement {
  100%{
    transform: translateX(200%);
  }
}

 <div class="container">
      <div class="first-container">
        <div class="box">
          <p>Click me</p>
        </div>
      </div>
      <div class="second-container"></div>
</div>