javascript - How can I change parent of an element with transform translate animation? - Stack Overflow

admin管理员组

文章数量:1415467

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>

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>

• javascript
• html
• css

Share Improve this question Follow edited Dec 11, 2022 at 14:27 Mayank Kumar Chaudhari 18.9k1313 gold badges7272 silver badges155155 bronze badges asked Apr 27, 2022 at 16:50 turnamong1452turnamong1452 5355 bronze badges 2

• Does this answer your question? Trigger CSS transition on appended element – Harun Yilmaz Commented Apr 27, 2022 at 16:55
• not actually... – turnamong1452 Commented Apr 27, 2022 at 17:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

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>

本文标签： javascriptHow can I change parent of an element with transform translate animationStack Overflow