如何使用動畫交換兩個Div

Question

我有一個項目，我希望一個div出現為一個大盒子，另外三個div出現在下面作為小盒子，當你點擊一個小盒子時，它會使用css過渡效果改變大小並與大盒子交換位置，以使移動和大小變化平滑。目前，我正在嘗試使用jQuery，但定位根本無效。這是我目前的範例：

https://jsfiddle.net/v3pmhawj/1/

$(function () {
    let { left: x1, top: y1 } = $('.full-size-card').offset()
    
    $('.inactive-sheets .card').on('click', function() {
        let { left: x2, top: y2 } = $(this).offset()
        
        let curr = $('.full-size-card')
        let diffX = x2 - x1
        let diffY = y2 - y1
        
        $(this).css({
            left: -diffX,
            top: -diffY
        })
        $(this).addClass('full-size-card')
        
        curr.css({
            left: diffX,
            top: diffY
        })
        curr.removeClass('full-size-card')
    })
})

如果有人有涉及其他庫或其他技術的建議，我願意傾聽。我希望能夠在DOM中移動divs，但據我所知，如果這樣做，你無法對它們進行css過渡效果，因為（我所知道的）唯一的方法是在DOM中刪除並重新添加一個元素的副本。

Answer 1

您只需使用過渡效果即可建立動畫效果。為了實現這一點，您需要定義容器的寬度和高度，以及底部元素的頂部和左側位置。

在點擊時，您只需交換將變小的元素的類別和將變大的元素的類別。

這是一個範例的fiddle連結： https://jsfiddle.net/fkd3ybwx/210/

#HTML

<div class="card-container">
  <div class="card large">A</div>
  <div class="card small">B</div>
  <div class="card small">C</div>
  <div class="card small">D</div>
</div>

CSS

.card-container {
  position: relative;
}

.card {
  transition: all ease 1s;
  position: absolute;
  font-size: 24px;
  border: white 4px solid;
  box-sizing: border-box;
  cursor: pointer;
}

.small {
  width: 100px;
  height: 100px;
  background: blue;
  left: 0;
  top: 300px;
}

.small ~ .small {
  left: 100px;
  background: green;
}

.small ~ .small ~ .small {
  left: 200px;
  background: yellow;
}

.large {
  width: 300px;
  height: 300px;
  background: red;
  left: 0px;
  top: 0px;
}

JavaScript

const smallCards = document.querySelectorAll('.card');

smallCards.forEach((smallCard) => {
    smallCard.addEventListener('click', (event) => {
    const largeCard = document.querySelector('.large');
    
    largeCard.className = "card small";
    event.target.className = "card large";
  });
});