如何使用条件“if”（JavaScript）在一定距离后使 div 消失

Question

I tried to move a block to 200 px on the right (this part is fine)

 function blue() { document.getElementById("blue").style.transform = "translate(200px)"; document.getElementById("blue").style.transition = "0.5s"; }

 #blue{ width: 200px; height: 200px; margin: 2rem; background-color: rgb(133, 133, 134); }

 <div id="blue"></div> <button onclick="blue()">right</button>

but I add an IF: if it's more than 200 px it should disappear. The problem is that is disappear anyway regardless of the px.

 function blue() { document.getElementById("blue").style.transform = "translate(200px)"; document.getElementById("blue").style.transition = "0.5s"; if(document.getElementById("blue").style.transform = "translate(200px)" > "200px"){ document.getElementById("blue").style.display = "none"; } else { document.getElementById("blue").style.display = "block"; } } function appear(){ document.getElementById("blue").style.display = "block" }

 #blue{ width: 200px; height: 200px; margin: 2rem; background-color: rgb(133, 133, 134); }

 <div id="blue"></div> <button onclick="blue()">right</button> <button onclick="appear()">make it appears</button>

My condition:

 if(document.getElementById("blue").style.transform = "translate(200px)" > "200px")

seems wrong, how can I write it?

Answer 1

First we select the element and store the current position of the element. Then we set a listener ontransistioned() which is fired after the element's transition has occurred. When the listener function is fired, we determine the difference between the old position and the new position. If this difference is greater equal 200, we set the display property to "none" .

 function blue() { const elem = document.getElementById("blue"); const oldPos = elem.getBoundingClientRect(); elem.ontransitionend = () => { const newPos = elem.getBoundingClientRect() const diff = Math.abs(oldPos.x - newPos.x) if (diff >= 200) elem.style.display = "none"; }; elem.style.transform = "translate(200px)"; elem.style.transition = "0.5s"; } function appear(){ document.getElementById("blue").style.display = "block" }

 #blue{ width: 200px; height: 200px; margin: 2rem; background-color: rgb(133, 133, 134); }

 <div id="blue"></div> <button onclick="blue()">right</button> <button onclick="appear()">make it appears</button>