javascript – Tips on how to Swap Two Divs With Animation

I’ve a mission the place I desire a div to look as a big field and three extra to look beneath as smaller containers and while you click on a smaller field, it switches sizes and locations with the big field utilizing css transitions to make the motion and dimension change easy. Proper now I am making an attempt to make use of jQuery and the positioning shouldn’t be working in any respect. Here is an instance of what I’ve thus far:

https://jsfiddle.internet/v3pmhawj/1/

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

If anybody has strategies on ways in which contain different libraries or different methods, I am all ears. I would like to have the ability to transfer the divs round within the DOM as nicely however so far as I can inform, you’ll be able to’t css-transition them when you do this because the solely manner (I do know of) is to delete and re-add a duplicate of the component the place you need it within the DOM.