javascript - 将元素动画到其在 DOM 中的新位置

Question

我有一个容器，里面有未知数量的卡片(从 3 到 8 张不等)。

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

当一个被点击时，所有其他的都消失了，被点击的卡片需要向左移动。例如，如果点击了中间的卡片:

卡片消失

|       --       |
|      CARD      |
|       --       |

卡片向左移动(带有动画)

|  --            |
| CARD           |
|  --            |

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

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

    cards.forEach(card => {
        card.addEventListener('click', () => {
            cards.forEach(card2 => {
                if(card2 != card){
                    card2.style.animation = 'fadeOut 0.2s linear forwards';
                }
            })
        })
    })

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

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

这可以用 css 动画实现吗？

Answer 1

动画元素到它的新位置

要使元素动画到其新位置，请遵循以下简单步骤:

1. 计算元素相对于父元素的当前 X, Y位置
2. 隐藏其他元素 display: none
3. 由于该元素在其他元素消失后有了新位置 - 将其(移动)立即返回使用 CSS 的位置 translate: transform(x, y) 到旧的 X 和 Y。
4. Animate with CSS transition to 0, 0 translate: transform(0, 0)，这是在其他元素从 View 中隐藏之后此元素实际占据的位置。

下面是上面列表的一个例子，它有一个额外的步骤，先淡出其他元素，然后再隐藏它们，并且只对元素进行动画处理:

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>