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>