【问题标题】：How to add a smooth replacement to a div inside a gird container?如何为网格容器内的 div 添加平滑替换？
【发布时间】：2021-02-16 22:57:36
【问题描述】：

`FIRST Run the script below to understand what I'm talking about here`

我们在这里拥有什么

嗯，我们有一个盒子和一个容器。

2 秒后，它开始从位置 1 移动到位置 2。

js代码基本是把box的grid-column属性改成替换掉。

问题

我怎样才能让它的运动更顺畅一些？就像，transition: all 1s 不起作用。有什么想法吗？

setTimeout( () => {
    const box = document.getElementById("box");
    

    box.classList.remove("pos-1");
    
    box.classList.add("pos-2");
    
  
}, 2000);

.container {
  width: 300px;
  height: 300px;
  
  display: grid;
  
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
}

#box {
  background-color: red
}


.pos-1 {
  grid-column: 1;
  
}

.pos-2 {
  grid-column: 4;
  
}

<div class="container">
  <span class="pos-1" id="box"></span>
</div>

【问题讨论】：

你可以使用带有过渡移动效果的span，然后当它到达想要的位置时，设置它的显示为none；并在网格中的新位置设置框显示 =)
您设置它的方式不会很顺畅。没有明智的过渡坐标，因为您不让它从一个位置移动到另一个位置。你让它从一个单元格跳到另一个单元格，它会跳过中间的所有空间。
您不能将过渡应用于grid-column 属性（列位置），只能应用于grid-template-columns 属性（列大小）。
我认为 html { scroll-behavior: smooth;} 在 html 标签上应该可以缓解这个
@NishantShamVispute 怎么会这样？ scroll-behavior: smooth; 无法确保顺利过渡。它与手头的问题无关。仅当您使用来自hyper reference 的anchor 目标时，才会将跳转行为从跳转更改为滚动。这里没有锚，没有超引用或目标。

标签： javascript html css css-transitions css-grid

【解决方案1】：

我不知道如何使用您想要的网格元素来做到这一点，但是您可以使用 CSS 动画并使用 @keyframes 获得漂亮的补间动画。然后使用 setTimeout 使用 JS 将元素设置在关键帧末尾的位置。我还使用根元素来发送变量，所以一切都在相同的持续时间内。条件将两秒超时 2000 拆分为 2s 并将其发送到根元素以用于 CSS 动画持续时间。

const root = document.documentElement; //--> <html> element
const box = document.getElementById("box");
const distance = `150px`;
const duration = 2000;

const move = (distance, duration) => {
  // the conditional makes sure the setTimeout time and duration time in the css are the same
  // transform the duration into proper seconds for the CSS animations on the CSS side
  if (`${duration}`.length > 3) {
    let whole = `${duration}`.slice(0, `${duration}`.length - 3);
    root.style.setProperty('--duration', `${whole}s`);
  } else { // this is  milliseconds send over as is
    root.style.setProperty('--duration', `.${duration}s`);
  }
  // send the distance over to the root element (HTML) and 
  // transfer to target element using a css variable in css
  root.style.setProperty('--distance', distance);

  // timeout to set the elements position at the end of the keyframe tween
  setTimeout(() => {
    box.style.transform = `translateX(${distance})`;
  }, duration + 10);
}

 move(distance, duration);

.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  position: relative;
}

#box {
  background-color: red;
  width: 50px;
  height: 50px;
  animation: moveToRight var(--duration) ease-in-out;
  animation-delay: 2s;
}

@keyframes moveToRight {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(var(--distance));
  }
}

<div class="container">
  <span id="box"></span>
</div>

【讨论】：