有没有办法将元素从一个网格单元格动画到另一个网格单元格

Question

我想让一个元素滑到另一个网格单元格。我原以为使用 jQuery 的 .animate() 方法会很容易，但你不能通过那里更改网格 CSS。您也不能使用.css() 方法，因为那样它只会卡入到位，不会滑入到位。

有没有一种简单的方法可以用 CSS 和 javascript/jQuery 做到这一点？我可以使用其他 API 来简化此操作吗？老实说，我不知道从哪里开始。

Answer 1

我能想到的唯一方法就是几乎伪造它？获取框的当前 x/y 坐标，将其放入新位置，获取新 x/y 坐标，将其捕捉回来，使用position: relative 对其进行动画处理，然后在动画完成后，取消相对定位并将其更新回正确的坐标。

类似这样的：

const b = document.getElementById('b');
document.getElementById('demo').addEventListener('click', function() {
    const { top: top1, left: left1 } = b.getBoundingClientRect();
    b.style.transition = '2s';
    b.style['grid-row-start'] = 3;
    b.style['grid-row-end'] = 4;
    const { top: top2, left: left2 } = b.getBoundingClientRect();
    b.style['grid-row-start'] = 2;
    b.style['grid-row-end'] = 3;
    setTimeout(() => {
        b.style.transition = 'auto';
        b.style['grid-row-start'] = 3;
        b.style['grid-row-end'] = 4;
        b.style.top = 0;
        b.style.left = 0;
    }, 2000);
    
    b.style.left = (left2 - left1) + 'px';
    b.style.top = (top2 - top1) + 'px';
});

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  top: 0;
  left: 0;
  transition: 2s;
  position: relative;
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
.b {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}
.c {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
}
.d {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
.e {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
.f {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}

<button id="demo">Click Me</button>
<div class="wrapper">
  <div class="box a">A</div>
  <div id="b" class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>