如何使用动画交换两个Div-PHP中文网问答

我有一个项目，我希望一个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中删除并重新添加一个元素的副本。