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 5 · 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>

Emiel Zuurbier · Answer 2 · 2023-01-04T11:22:56.963

In addition to A Haworth's excellent answer, you could further iterate on this by using the Web Animations API. This API uses the same fundamentals as CSS Animations, but allows you to perform the actions through JavaScript.

Like Haworth, get the first position of the #child element. Then move it to it's destination. Measure the position of the #child again. Subtract the last position from the first position. The result of this subtraction is the difference between the two points, otherwise known as the delta.

Use the delta to translate the #child to it's previous first and then animate it to the last known position.

const moveButton = document.querySelector('#move');

const origin = document.querySelector('#div_a');
const target = document.querySelector('#div_b');
const child = document.querySelector("#child");

moveButton.addEventListener('click', () => {
  const { left: x0, top: y0 } = child.getBoundingClientRect();
  target.append(child);
  const { left: x1, top: y1 } = child.getBoundingClientRect();

  const dx = x0 - x1;
  const dy = y0 - y1;
  
  if (dx === 0 && dy === 0) {
    return;
  }

  const transformFrom = `translate3d(${dx}px, ${dy}px, 0)`;
  const transformTo = `translate3d(0, 0, 0)`;

  const animation = child.animate([
    { transform: transformFrom },
    { transform: transformTo },
  ], {
    duration: 2000,
    easing: 'linear',
  });
});

<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 id="move">move</button>

score -1 · Answer 3 · 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?

3 Answers3