el siguiente es mi código, quiero detener la transición pero mantener su traducción actual , pero el siguiente código detiene la transición y establece la traducción Y 0, espero una forma de obtener la traducción actual cuando la transición
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!--mobile friendly--> <meta name="viewport" content="width=device-width, user-scalable=yes"> <style> .it { width: 300px; height: 300px; background-color: pink; transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1) 0s; } </style> </head> <body> <div class="it"> </div> <script type="module"> var it = document.querySelector(".it") setTimeout(() => { it.style.transform = "translateY(500px)" }, 100) setTimeout(() => { it.style.transform = null }, 1000) </script> </body> </html>Escribí un método que no sé si te satisfará
<style> .it { width: 300px; height: 300px; background-color: pink; transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1) 0s; } .it-class { transform: translateY(500px) ; } </style> </head> <body> <div class="it"> </div> <button>stop</button> <script> var it = document.querySelector(".it") const button = document.querySelector("button") button.onclick = () => { it.classList.toggle('it-class') } </script>Encuentro una solución, uso getBoudingRectClient().y y window.scrollY puede obtener el elemento abs pos y en el documento;
así que obtenga el padre abs_pos_y y el elemento abs_pos_y para obtener el elemento actual pos y del borde superior principal (rel_pos_y),
cur_translateY = rel_pos_y - elemento.offsetTop
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!--mobile friendly--> <meta name="viewport" content="width=device-width, user-scalable=yes"> <style> .c { position: relative; border: 5px solid black; width: 300px; height: 300px; } .it { margin-top: -200px; width: 300px; height: 300px; background-color: pink; transition: 2s cubic-bezier(0.19, 1, 0.22, 1) 0s; } </style> </head> <body> <div class="c"> <div class="it"> </div> </div> <script type="module"> var it = document.querySelector(".it") // offsetTop don't calc translateY, so use following get element abs pos y in document var getPos = (e) => { var rect = e.getBoundingClientRect() return { x: rect.x + window.scrollX, y: rect.y + window.scrollY } } setTimeout(() => { it.style.transform = "translateY(300px)" }, 100) // setTimeout(() => { var c = document.querySelector(".c") var cy = getPos(c).y console.log(`cy:${cy}`) var iy = getPos(it).y console.log(`iy:${iy}`) it.style.transform = `translateY(${iy - cy - it.offsetTop}px)` // iy - cy is element dist from parent top border, - it.offsetTop get translateY }, 800) </script> </body> </html>