如何使用动画交换两个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";
  });
});