CSS转换不能正常工作右div div offsetLeft

Question

我有五个div。其中四个div可以点击，它会运行一个函数，用于将您点击的div移动到第五个div的坐标，使用div.offsetLeft和div.offsetTop。前三个div都可以正常工作，但如果先单击最右侧的div，则在移动到坐标时不会应用转场效果。如果您先点击任何其他div，然后再点右边的div，则转换将适用。

如果你这样做只有两个或三个div，问题仍然存在。 （你必须从党阵列以及html元素中删除相应的id）。

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

道歉HTML中的JavaScript。从来没有使用过jsfiddle，并且无法弄清楚如何在html之后加载javascript。

Answer 1

东西janky是怎么回事，当你getCurrentPosAll()从默认static改变position到absolute

你可以改变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) { 
 
\t var party = e.target 
 
    getCurrentPosAll(); 
 
    party.style.left = selectedX + "px"; 
 
    party.style.top = selectedY + "px"; 
 
} 
 

 
function getCurrentPosAll() { 
 
\t for (var idx = 0; idx < parties.length; idx++) { 
 
    \t 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++) { 
 
    \t 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>