Question

我的div位置绝对。我想将其从一个点移动到另一个点，从（50,50）移至（400,500）。每次单击按钮以移动元素时，点都会更改。我想使用动画进行过渡。

在一般解决方案中该怎么做？或者是否有npm软件包？

Answer 1

这是您的简单示例（这不是生产就绪的解决方案）。

function moveElement() {
  const div = document.getElementById('div');
  
  div.style.top = `${Math.random() * 200}px`;
  div.style.left = `${Math.random() * 200}px`;
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  
  position: absolute;
  top: 50px;
  left: 50px;
  
  transition: all .5s ease-in-out;
}

<button onclick="moveElement();">Move</button>

<div id="div"></div>

也许您只需要使用动画库即可。例如：https://github.com/juliangarnier/anime/或http://michalsnik.github.io/aos/。

Answer 2

您可以仅使用纯JavaScript，这是一个小示例，动画通过此行transition: all .3s ease;

完成

let left = document.getElementById('left');
let right = document.getElementById('right');
let redBox = document.querySelector('.element');
left.onclick = function(){
  let pos = parseInt(window.getComputedStyle(redBox,null).getPropertyValue("left"), 10);
  let move = pos - 40;
  redBox.style.left = move + 'px'
}
right.onclick = function(){
  let pos = parseInt(window.getComputedStyle(redBox,null).getPropertyValue("left"), 10);
  let move = pos + 40;
  redBox.style.left = move + 'px'
}

.element{
  width: 20px;
  height: 20px;
  background-color: tomato;
  transition: all .3s ease;
  position: absolute;
  top: 0;
  left: 0;
}
button{
  margin: 40px 0;
}

<div class="element"></div>
<button id="left">left</button>
<button id="right">right</button>

Answer 3

我想说的是，您应该在不同位置使用不同的类，并在单击元素时仅使用javascript应用不同的类。如果您知道要使用的职位的特定顺序，则可以将每个类名称作为字符串存储在数组中：

<button onclick="changePos()">Click me</button>

var positions = ['.pos1', '.pos2', '.pos3'];
var curPos = 0; 

function changePos(){
  $("#myElement").toggleClass(positions[curPos]);
  curPos++;
}

如何通过动画将元素从一个点移动到另一个？

3 个答案: