Quiero mover un elemento de un padre a otro padre. Aquí quiero aplicar la animación de transformación 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>Puede averiguar dónde se encuentra actualmente el elemento, moverlo a su nuevo padre y averiguar dónde está ahora, volver a colocarlo en su padre original y establecer una animación para que se traduzca a su nueva posición.
Cuando la animación se haya completado, coloque el elemento en su nueva posición (es decir, en su nuevo padre).
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>Creo que esto resolverá tu problema.
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>