CSS过渡不适用于offsetLeft上最右边的div

Question

我有五个div。 您可以单击其中的四个div，这将运行一个函数，该函数使用div.offsetLeft和div.offsetTop将您单击的div移动到第五个div的坐标。 前三个div都可以正常工作，但是如果首先单击最右边的div，则移至坐标时不会应用过渡效果。 如果您先点击其他任意div，然后再点击最右边的div，则将应用过渡。

如果这样做，则只有两个或三个div，问题仍然存在。 （您必须从多方数组和html元素中删除相应的ID）。

jsfiddle： https ://jsfiddle.net/zjystr2u/

抱歉html中的javascript。 从未使用过jsfiddle，也无法弄清楚如何使其在html之后加载javascript。

Answer 1

当getCurrentPosAll()将position从默认static更改为absolute position时，发生了一些混乱现象

您可以在更改top和left之前运行getCurrentPosAll()以正确设置其默认值。

 var selected = document.getElementById("selected"); var selectedX = selected.offsetLeft; var selectedY = selected.offsetTop; parties = ['opt1', 'opt2', 'opt3', 'opt4']; getCurrentPosAll(); // (NEW) Make sure their defaults are set. function moreTest(e) { var party = e.target party.style.left = selectedX + "px"; party.style.top = selectedY + "px"; } function getCurrentPosAll() { for (var idx = 0; idx < parties.length; idx++) { var currentDiv = document.getElementById(parties[idx]); var x = currentDiv.offsetLeft; var y = currentDiv.offsetTop; currentDiv.style.left = x + "px"; currentDiv.style.top = y + "px"; } for (var idx = 0; idx < parties.length; idx++) { var currentDiv = document.getElementById(parties[idx]); currentDiv.style.position = "absolute"; } } 

 .wrapper { display: flex; justify-content: space-around; width: 75%; margin: 0 auto; } .selected { width: 100px; height: 150px; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; background-color: black; opacity: 0.6; z-index: 1; } .opt { width: 100px; height: 150px; cursor: pointer; transition: top 0.7s, left 0.7s; } .opt1 { background-color: red; } .opt2 { background-color: blue; } .opt3 { background-color: orange; } .opt4 { background-color: green; } 

 <div class="wrapper"> <div class="selected" id="selected"></div> <div class="opt opt1" id="opt1" onclick="moreTest(event)"></div> <div class="opt opt2" id="opt2" onclick="moreTest(event)"></div> <div class="opt opt3" id="opt3" onclick="moreTest(event)"></div> <div class="opt opt4" id="opt4" onclick="moreTest(event)"></div> </div> 

我不确定为什么会这样。 我认为这与浏览器如何以及何时计算过渡的初始值有关。 最后元素CSS更改将分批更新1次。
因此，它将立即接收更新的top和left值，而其他元素将接收2个更新，一个具有默认的top和left ，然后一个具有更新的值。 导致其过渡正常运行。
最有可能是因为最后一个元素CSS发生了更改，所以它们的css更新将以2个更新而不是1个更新的方式应用。

Answer 2

 var selected = document.getElementById("selected"); var selectedX = selected.offsetLeft; var selectedY = selected.offsetTop; parties = ['opt1', 'opt2', 'opt3', 'opt4', 'opt5','opt6']; function moreTest(e) { var party = e.target getCurrentPosAll(); party.style.left = selectedX + "px"; party.style.top = selectedY + "px"; } function getCurrentPosAll() { for (var idx = 0; idx < parties.length; idx++) { var currentDiv = document.getElementById(parties[idx]); var x = currentDiv.offsetLeft; var y = currentDiv.offsetTop; currentDiv.style.left = x + "px"; currentDiv.style.top = y + "px"; } for (var idx = 0; idx < parties.length; idx++) { var currentDiv = document.getElementById(parties[idx]); currentDiv.style.position = "absolute"; } } 

 .wrapper { display: flex; justify-content: space-around; width: 100%; margin: 0 auto; } .selected { width: 100px; height: 150px; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; background-color: black; opacity: 0.6; z-index: 1; } .opt { width: 100px; height: 150px; cursor: pointer; transition: 0.7s; } .opt1 { background-color: red; } .opt2 { background-color: blue; } .opt3 { background-color: orange; } .opt4 { background-color: green; } .opt5 { background-color: violet; } .opt6 { background-color: black; } 

 <div class="wrapper"> <div class="selected" id="selected"></div> <div class="opt opt1" id="opt1" onclick="moreTest(event)"></div> <div class="opt opt2" id="opt2" onclick="moreTest(event)"></div> <div class="opt opt3" id="opt3" onclick="moreTest(event)"></div> <div class="opt opt4" id="opt4" onclick="moreTest(event)"></div> <div class="opt opt5" id="opt5" onclick="moreTest(event)"></div> <div class="opt opt6" id="opt6" onclick="moreTest(event)"></div> </div>