将元素动画到 DOM 中的新位置

Question

我有一个容器，里面有未知数量的卡片（从 3 到 8 张）。

|  --   --   --  |
| CARD CARD CARD |
|  --   --   --  |

当单击其中一张时，所有其他卡片都会消失，并且单击的卡片需要向左移动。例如，如果点击中间的卡片：

卡牌消失

|       --       |
|      CARD      |
|       --       |

卡片向左移动（有动画）

|  --            |
| CARD           |
|  --            |

这些卡片可以消失，但我觉得我的解决方案不是很好。我无法将卡移至左侧。

这是我隐藏卡片的解决方案：

|  --   --   --  |
| CARD CARD CARD |
|  --   --   --  |

但我很不确定如何移动卡。这是卡片容器和卡片本身的 css。

|       --       |
|      CARD      |
|       --       |

这可以通过CSS动画实现吗？

Answer 1

将元素动画移动到新位置

要将元素设置为新位置的动画，请按照以下简单步骤操作：

1. 计算当前元素相对于父元素的X、Y位置
2. 隐藏其他元素display: none
3. 由于现在其他元素都消失了，该元素有了新位置 -使用 CSS 将其立即捕捉（移动）translate: transform(x, y)回旧的X 和 Y 的位置。
4. 使用 CSS将动画设置transition为0, 0 translate: transform(0, 0)，这是在其他元素从视图中隐藏后该元素实际占据的位置。

下面是上述列表的示例，其中包含一个额外步骤，即在隐藏其他元素之前先淡出它们，并且仅对元素进行动画处理：

const animateCards = (card) => {
  const fxHide = `display: none;`;
  const fxFade = `transition: opacity 0.3s; opacity: 0;`;
  const fxMove = `transform: translate(${card.offsetLeft}px, ${card.offsetTop}px);`;
  const fxAnim = `transition: transform 0.5s; transform: translate(0, 0);`;
  let other; // Just to catch a sibling element as reference

  cards.forEach(el => {
    if (el === card) return;
    if (!other) other = el;
    el.addEventListener("transitionend", () => el.style.cssText += fxHide, {once: true});
    el.style.cssText += fxFade;
  });

  other.addEventListener("transitionend", () => {
    card.style.cssText += fxMove;
    setTimeout(() => card.style.cssText += fxAnim, 0);
  }, {once: true});
};

const cards = document.querySelectorAll(".card");
cards.forEach(el => el.addEventListener('click', () => animateCards(el)));

.cards {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 50px;
  position: relative;
}

.card {
  height: 100%;
  position: relative;
  cursor: pointer;
}

<div class="cards">
  <div class="card" style="background-color:#0bf;">1</div>
  <div class="card" style="background-color:#f0b;">2</div>
  <div class="card" style="background-color:#bf0;">3</div>
</div>