Question

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

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

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

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

Answer 1

当您getCurrentPosAll()将position从默认static更改为absolute

时，有些事情正在发生

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

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更改的元素将 batched 更新为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>

CSS转换不适用于offsetLeft上最右边的div

2 个答案: