如何为JavaScript创建的元素添加CSS Transition过渡效果？

你的代码里有几个关键问题导致过渡没生效：

1. 只给单个<li>加了transitionDelay，但根本没设置核心的transition属性，浏览器不知道要过渡什么；
2. 直接通过appendChild重新排列元素，浏览器会一次性完成DOM更新，不会触发过渡——因为元素的位置变化是瞬间的，没有可被过渡追踪的属性变化；
3. 点击后用setTimeout清空DOM再重建，过渡还没跑完元素就被销毁了。

解决思路 #

用CSS的order属性配合flex布局实现过渡：给每个拼图块设置transition属性，洗牌时只修改它们的order值，浏览器会自动触发过渡动画。

修改后的完整代码 #

<div class="wrap-all">
  <ul class="image-container">
  </ul>
</div>
<div class="container"></div>

<style>
.wrap-all {
  cursor: pointer;
}
.image-container {
  display: flex;
  flex-wrap: wrap;
  width: 400px; /* 根据你的拼图大小调整 */
  list-style: none;
  padding: 0;
  margin: 0;
}
.image-container li {
  width: 100px; /* 4块一行，400/4=100 */
  height: 100px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  /* 核心过渡属性：指定过渡order属性，时长可调整 */
  transition: order 0.5s ease;
}
</style>

<script>
const container = document.querySelector(".image-container");
const wrapAll = document.querySelector(".wrap-all");
const tileCount = 16;

let tiles = [];

setGame();

function setGame() {
  tiles = createImageTiles();
  tiles.forEach(tile => container.appendChild(tile));
}

wrapAll.addEventListener('click', () => {
  // 洗牌后给每个tile分配新的order值
  const shuffledTiles = shuffle([...tiles]);
  shuffledTiles.forEach((tile, index) => {
    tile.style.order = index;
  });
})

function createImageTiles() {
  const tempArray = [];
  Array(tileCount).fill().forEach((_, i) => {
    const li = document.createElement("li");
    li.setAttribute('data-index', i);
    li.classList.add(`list${i}`);
    // 初始设置order值，和索引一致
    li.style.order = i;
    // 可以给每个li加背景色区分，方便看效果
    li.style.backgroundColor = `hsl(${i*22.5}, 70%, 80%)`;
    tempArray.push(li);
  })
  return tempArray;
}

function shuffle(array) {
  let index = array.length - 1;
  while (index > 0) {
    const randomIndex = Math.floor(Math.random() * (index + 1));
    [array[index], array[randomIndex]] = [array[randomIndex], array[index]];
    index--;
  }
  return array;
}
</script>

关键修改点说明 #

• CSS部分：给.image-container设置display: flex和flex-wrap: wrap，让拼图块自动排列；给每个<li>添加transition: order 0.5s ease，指定过渡order属性，时长0.5秒（可根据需求调整）。
• JS部分：点击事件里不再重新appendChild，而是给洗牌后的每个tile设置新的order值；去掉了清空DOM的逻辑，避免元素被销毁导致中断过渡。
• 初始化：创建tile时就设置初始order值，和索引一致，确保初始布局正常。

如果你想用绝对定位的位置过渡（比如top/left变化），逻辑类似：给每个tile设置position: absolute，初始化时计算好每个位置的top/left，洗牌时修改这些值，同时设置transition: top 0.5s ease, left 0.5s ease即可。

内容的提问来源于stack exchange，提问作者DANA