How can I change parent of an element with transform translate animation?

Question

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

Does this answer your question? [Trigger CSS transition on appended element](https://stackoverflow.com/questions/24148403/trigger-css-transition-on-appended-element) — Harun Yilmaz, Apr 27 '22 at 16:55

score 0 · Answer 1 · answered Apr 27 '22 at 18:51

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

score -1 · Answer 2 · answered Apr 27 '22 at 18:41

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 class="container">
      <div class="first-container">
        <div class="box">
          <p>Click me</p>
        </div>
      </div>
      <div class="second-container"></div>
</div>

How can I change parent of an element with transform translate animation?

2 Answers2