check the image

I want to move an element from one parent to another parent. Here I wanna apply CSS transform animation.

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" >
        <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>

CodePudding user response：

You can find out where the element is currently, move it to its new parent and find out where it is now, put it back in its original parent and set an animation for it to translate to its new position.

When the animation has completed then you put the element into its new position (ie into its new parent).

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" >
    <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>

CodePudding user response：

I think this will solve your problem.

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 >
      <div >
        <div >
          <p>Click me</p>
        </div>
      </div>
      <div ></div>
</div>